Vuex

1、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

2、示例

export default new Vuex.Store({
//记录应用程序状态，一般来说只能在mulations中用 commit改变状态
  state: {
    count:0,
    roles:['master','normal user']
  },
  //就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  getters:{
      normalRoles(state){
          return state.roles.filter(function{...})
      }
  },
  //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
  mutations: {
    getCount(state){
      return state.count
    },
    setCount(state,x){
      state.count  = x
    }
  },
  /*Action 提交的是 mutation，而不是直接变更状态。
  Action 可以包含任意异步操作。
  可调用getters，mutations，也可以commit 改变state*/
  actions: {
    addCount: ({commit,state},count) => {
      //commit('setCount',count+1)
      state.count = state.count + count //奇怪的是这样也是可以的
    }
  }
})

3、分发action

$store.dispatch('addCount')

import {mapActions} from 'vuex'
methods:{
    ...mapActions([
    'addCount'
    ]),
    addThing(){
        this.addCount()
    }
}

4、store模块分割

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、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果需要彻底隔离，可用namespaced