vuex store 使用

vuex store 使用

import { mapState, mapMutations,mapActions,mapGetters } from 'vuex'; // 引入vuex的方法,用于使用辅助函数

state => 使用的变量管理器，称作状态树，是一个单一的状态，只能通过vuex注册的方法进行改变
使用：this.$store.state，或者使用 mapState

mutations => 必须是同步函数，接受 state 作为第一个参数,并接受调用时传入的参数（称作载荷Payload）。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
使用：this.$store.commit('xxx') 调用 mutations，或者使用 mapMutations，还有一种使用type属性的方法=> store.commit({type: 'increment',amount: 10})，这种方法会将整个对象都作为载荷传给 mutation 函数

actions => Action 类似于 mutation，区别于可以执行异步操作，例如在此进行请求后数据处理。可以在此处提交mutation(actions修改state的方法是提交mutation).
使用：this.$store.dispatch('xxx') 分发 action，或者使用 mapActions
组合 Action：store.dispatch('actionA').then(() => {})

还可以在另一个action中注册另一个异步方法，返回一个异步的函数，那么我们在调用actionB时同样可以等待异步进程then：
actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
}
当我们需要队列时，应该使用es7方法 async / await

getters => 类似于state，但是他是以方法的形式返回数据，可以用于数据处理结果直接展示，例如对列表进行过滤并计数。可以认为是 store 的计算属性，接受 state 作为第一个参数，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
使用：this.$store.getters.doneTodos调用getters函数，或者使用mapGetters辅助函数。


// 引入vuex中注册的方法，方法调用应该放在生命周期的methods中引入
methods: {
		...mapMutations(['setLogin'])
		...mapActions(['setLogin'])
}
// 引入vuex中的状态管理器，state只可以读取，不能直接修改，如果需要修改需要注册一个方法去修改，这个数值会根据store中的改变而改变，因此可以采用watch监听数据变化。getters返回的是处理后的state数据。
computed: {
	...mapState(['login']),
	...mapGetters(['doneTodosCount'])
}

我们应该提前在store中初始化好所有所需属性，当需要在对象上添加新属性时应该使用Vue.set(obj, 'newProp', 123)方法，或者使用state.obj = { ...state.obj, newProp: 123 }
我们多人协作时应采用mutation-types.js管理方式管理我们的store，由于我们的团队成员较少以及小程序体量的局限性，包括项目对store的使用率过低的情况不采用此方式增加项目体积。