Vuex初识

vuex是vue中单向数据流的一个状态管理模式，它能够集中存储管理应用中全部组件的状态，而且有一套相应的规则能够去预测数据的变化。相似与此的还有react中的redux,dva等状态管理模式。

通常咱们的状态管理包含如下几个部分：

• state 这是驱动页面变化的数据源
• view state数据展现的视图
• action 在view层用户操做数据变化的响应

vue中的数据流为单向数流

单向数据流在兄弟组件须要传参或者多个组件须要使用同一个状态而且多个组将均可以改变该状态时不易进行维护。

所以，咱们采起的是将多个共用的状态抽离到一个全局单例中（实际上就是将组件的状态抽离出来进行单独管理），其实在redux和dva中，是将每一个组件的状态抽离到它本身的单例状态中，而且这些单例状态之间是互通的。

vuex中数据流的一个大概的流程是，咱们再视图层经过触发一个一个的action到mutations中，mutataions中改变对应的state,而后该state的变化会去影响所对应的视图层的html结构。

固然正如其余状态机模式同样，若是你不打算开发大型单页应用，也是不必去使用vuex。

核心概念

vuex应用的核心就是store,store中包含着咱们应用中的大部分状态，vuex的状态存储是快速响应的，当store中的state有变化时，相应的组件也会快速的更新。而且咱们须要遵循vuex中的规则，没法直接去改变state,改变store中的状态的惟一途径就是经过commit.

经过每次的commit中所含的信息，咱们能够轻松明确的去看到咱们每次改变state的意图，这样也方便咱们未来对数据的追踪。

state

因为vuex使用单一状态树，也就是一个应用中的state你能够所有放到这一个store中，可是若是你放置的状态过多的时候，这也是挺鸡肋的不是？我尚未去看vuex如何将状态和状态变动的事件分布到各个子模块中去。

mapState是vuex提供的简化数据访问的辅助函数，mapState函数返回的是一个对象，一般，咱们须要使用一个工具函数将多个对象合并为一个，以使咱们能够将最终对象传给computed属性。

固然，使用vuex并不意味着咱们将全部的状态放入vuex，虽然将全部的状态放到vuex会使状态变化更显示和易调试，可是若是所有放到了全局Store中咱们的代码会变得冗长和不直观，因此这些个东西还须要边开发边权衡吧。

Getter

有时候咱们须要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

vuex容许咱们在store中定义“getter".就像计算属性同样，getter返回值会根据他的依赖被缓存起来，且只有当他的依赖值发生了改变才会被从新计算。

getter接受state做为其第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getter会暴露store.getters对象：
getter相似于dva中的reducer。

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }

getter也能够接受其余getter做为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

咱们能够很容易的在任何组件中调用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

mapGetters辅助函数

mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。
例如：

computed:{
    ...mapGetters(['getter1','getter2'])
}

按照上述写法，全局store中的getter1和getter2函数即可以在局部组件中使用了。
若是想将一个getter属性另取一个名字，使用对象形式：

computed:{
    ...mapGetters({
        newGetter:"oldStoreGetter"
    })
}

Mutation

更改Vuex的store中的状态的惟一办法是提交mutation.Vuex中的mutation很是相似于事件，这有点相似于dva中的effects,每个mutation都会有一个字符串的事件类型和一个回调函数。这个回调函数就是咱们实际进行状态更改的地方。而且他会接受state做为第一个参数：

mutations: {
    setAdminInfo(state,adminInfo){
      state.adminInfo = adminInfo;
    },
    setCityList(state,cityList){
      state.cityList = cityList
    }
  }

固然了，咱们还不能直接调用mutation handler,咱们想要执行此函数时，须要以相应的type调用store.commit方法:

当咱们须要给mutation传参时，咱们须要经过payload来进行,上述例子中的adminInfo就是咱们要传的的参数，在vuex中叫payload，固然，官方的建议是payload尽可能是一个对象，这样咱们在使用的时候可以更好的去追踪数据流。

固然，更好的调用mutation的方式是commit包含type属性的对象：

store.commit({
    type:'updateAdminInfo',
    adminInfo:{
        username:'allen',
        password:'qwe123',
    }
})

mutation须要遵照vue的响应规则

既然Vuex的store中的状态是响应式的，那么当咱们变动状态时，监视状态的vue组件也会自动更新。这就意味着Vuex中的mutation也须要与Vue同样遵照一些注意事项：

• 在store中初始化好全部的属性
• 使用新对象替换老对象，即每次都返回一个全新的state对象，可使用Object.Assign的方式。

使用常亮替代Mutation事件类型

使用常量替代mutation事件类型再各类flux实现中是很常见的模式。可使咱们整个项目的数据流向一目了然。

固然，另外重要的一点就是mutation必须是同步函数，当咱们再debug一个app而且观察devtool的mutation日志时，每一条mutation被记录，都须要捕捉到前一状态和后一状态的快照。

咱们能够在组件中使用this.$store.commit("example")提交mutation,或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

Action

Action相似于mutation,不一样在于:

• Action提交的是mutation，而不是直接变动状态。
• Action能够包含任意异步操做。

下边来看一个简单的action的例子：
jsconst store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })

Action经过store.dispatch方法触发：

store.dispatch('increment');

使用action进行触发mutation能够不用受必须同步执行的约束。咱们能够在Action内部执行异步操做。

一样Action中也可使用payload来传递参数

store.dispatch({
    type:"increment",
    amount:10
})

同时，Action一般是异步的，store.dispatch能够处理被触发的action的处理函数返回的Promise,而且store.dispatch仍然返回Promise.

如今，咱们已经不须要去执行promise.then函数了，咱们直接用async/await就能够了。

async action1({commit}){
    commit('gotData', await getData());
}

Module

使用单一状态树，应用的全部状态会集中到一个比较大的对象中。当应用变得很是复杂时，store对象就会变得十分臃肿。

vuex容许咱们将store分割成模块，每一个模块拥有本身的state,mutation,acion,getter,甚至是嵌套子模块，从上至下进行分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态

对于模块内部的mutation和getter,接受的第一个参数是模块的局部状态对象。一样的，对于模块内部的action，局部状态经过context.state暴露出来，根节点状态则为context.rootState；

对于模块内部的getter,根节点状态会做为第三个参数暴露出来；

命名空间

默认状况下，模块内部的action,mutation,和getter是注册再全局命名空间的--这样可使多个模块可以对同一个mutation或action做出响应。

固然，模块化中，咱们可使用namespaced:true的方式使其成为命名空间模块。当模块被注册以后，他的全部getter、Action、以及mutation都会自动根据模块注册的路径调整命名。启用了命名空间以后，即是将一个总体的store给分割成了一个个模块。

模块动态注册

在store建立以后，你可使用store.registerModule方法注册模块：

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

固然，咱们也能够经过store.unregisterModule（moduleName）来动态卸载模块。可是咱们没法使用此方法去卸载静态模块。

---

Vuex并不限制你的代码结构。可是，他规定了一些须要遵照的规则：

• 应用层级的状态应该集中到单个store对象中。
• 提交mutation是更改状态的惟一办法，而且这个过程是同步的。
• 异步逻辑都应该封装在Action里面。