vue状态管理vuex的使用

官方文档 

 注意点：

1. action 对象里方法的参数 content 拥有 store 实例的方法和属性，但不是 store 本体；
2. action 可以异步；
3. mutation 里的方法必须是同步的，异步的话难以追踪到状态的变化以及难以调试，因为不知道函数执行的顺序；
4. 触发mutation：store.commit('method')；触发action：store.dispatch('method')；
5. 不能直接修改 state 里的值，要通过触发 mutation 或是 action 去修改。
6. mapState、mapGetter、mapMutation、mapAction 四个辅助函数，就相当于批发的，当有很多个状态的时候，一个一个引入调用太过麻烦，就可以使用辅助函数来一下子解锁多个状态和方法。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    // context拥有 store 实例的方法和属性，但不是 store 本体
    increment(context) {
      context.commit('increment')
    }
    /* 或者以下参数方式
       increment({commit}) {
         commit('increment')
       }
    */
  }
})


// mutations
// 以载荷形式分发
store.commit('increment', {
  amount: 10
})
// 以对象形式分发
store.commit({
  type: 'increment',
  amount: 10
})


// actions
// 以载荷形式分发
store.dispatch('increment', {
  amount: 10
})
// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})