对于vuex状态管理，这里说下个人见解，vuex大概就是根据需求定义一些全局变量，但是我们必须通过store去访问和修改它。
我们可以把vuex分为state，getter，mutation，action四个模块，通俗的讲一下四个模块的作用：
state：定义变量；
getters：获取变量；
mutations：同步执行对变量进行的操作；
actions：异步执行对变量进行的操作；
下面定义了一个store模块log.js：
const state = {
logs: []
}
const getters = {
logsGetter: (state) => {
return state.logs
}
}
const mutations = {
ADD_ERROR_LOG: (state, log) => {
state.logs.push(log)
}
}
const actions = {
addErrorLog({ commit }, log) {
commit(‘ADD_ERROR_LOG‘, log)
}
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
那么我们怎么去用它们呢？首先我们来看代码:
<script>
import { mapstate, mapActions, mapMutations } from ‘vuex‘
export default {
computed: {
// 对象形式
// ...mapstate({
// logs: state => state.logs
// })
//数组形式
...mapstate([
// 需要和state中定义的变量相同
‘logs‘
])
},
methods: {
// 对象形式
// ...mapActions({
// ‘addErrorLog‘: ‘addErrorLog‘
// })
// 数组形式
...mapActions([
‘addErrorLog‘
]),
// 对象形式
// ...mapMutations({
// ‘ADD_ERROR_LOG‘: ‘ADD_ERROR_LOG‘
// })
// 数组形式
...mapMutations([
‘ADD_ERROR_LOG‘
])
}
}
</script>
vuex中的mapState, mapActions, mapMutations用法简介
原文：https://www.cnblogs.com/360minitao/p/13655891.html