一、核心原理

1.Vuex本质是一个对象,有两个属性，一个是install方法，一个是Store这个类。
2.install方法的作用是将store这个实例挂载到所有的组件上，注意是同一个store实例。
3.Store这个类拥有commit，dispatch这些方法，Store类里将用户传入的state包装成data，作为new Vue的参数，从而实现了state 值的响应式。
4.$store是挂载在Vue实例、即Vue.prototype中，在组件中可使用 this 访问原型上的属性 如 this.$store.state.count。

工作原理如图：

vuex.png

通过store.dispatch('increment')分发Action（可异步操作回调），通过Action 提交Mutation（只能同步更改数据），通过Mutation修改state里面的值

二、伪代码

state:{
  conut:1
},
mutations:{
   setDataMutation(state,payload){// 在大多数情况下，载荷payload 应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
     state.count+=payload.count
   }
},
actions:{
    setDataAction(context，data){
        context.commit('setDataMutation',data)
    }
}

this.store.dispatch('setDataAction',{count:2}).then(()=>{})

三、简化写法（辅助函数mapState、mapGetters 、mapMutations 、 mapActions）

为了减少代码量...

mapState

• 需要从 store 实例中读取状态时,并赋予computed计算属性时

computed:{
  count:(){
    return  this.$store.state.count
  }
}

• 使用 mapState

import { mapState } from 'vuex'

export default {
  computed:mapState{
     count:state => state.count
 }
}

• 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

• 与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

mapGetters

• store 的 getter,可以认为是 store 的计算属性,用来筛选store中符合某些条件的数据

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

• 使用getter

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

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

• 使用mapGetters
  mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

mapMutations

• mutation 需要store实例的commit方法触发

this.$store.commit('setDataMutation')

• 使用 mapMutations

import { mapMutations } from 'vuex'

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

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

mapActions

• 在组件中分发Action:使用 this.$store.dispatch('xxx') 分发 action

• 使用mapActions

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'setDataAction', // 将 `this.setDataAction()` 映射为 `this.$store.dispatch('setDataAction')`

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

四、使用Module

作用：将全局数据按分类储存在不同模块中

• 开启namespace

// 在module中
export default {
    namespaced: true,
    // ...
}

import moduleA from './module/moduleA';
import moduleB from './module/moduleB';

export default new Vuex.Store({
    modules: {
        moduleA, moduleB,
    },
    // ...
}

// ...
computed: {
    ...mapState({
        name: state => state.moduleA.text
    }),
},
// ...

computed: {
    ...mapState('some/nested/module', {
        a: state => state.a,
        b: state => state.b
    })
},
methods: {
    ...mapActions('some/nested/module', [
        'foo', // -> this.foo()
        'bar' // -> this.bar()
    ])
}

• createNamespacedHelpers 创建基于某个命名空间辅助函数。

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

访问根节点

• 模块内部的 state 是局部的，只属于模块本身所有。那么如果我们要想在模块中访问 store 根节点的数据 state，怎么办呢？

export default {
    // ...
    getters: {
        // 注意:rootState必须是第三个参数
        detail(state, getters, rootState) {
            return state.text + '-' + rootState.name;
        }
    },
    actions: {
        callAction({state, rootState}) {
            alert(state.text + '-' + rootState.name);
        }
    }
}

• 在带命名空间的模块内访问全局内容

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}