## vuex状态管理
`state，getter，mutation，action四个模块
state：定义变量；
getters：获取变量；
mutations：同步执行对变量进行的操作；
actions：异步执行对变量进行的操作；
`
### 页面
~~~
import { mapstate, mapActions, mapMutations } from 'vuex' //导入辅助函数
~~~
### 处理形式
#### 数据state
~~~
computed: { //计算函数
// 对象形式
// ...mapstate({
// logs: state => state.logs
// })
//数组形式
...mapstate([
// 需要和state中定义的变量相同
'logs'
])
},
logs可直接使用 this.logs
~~~
#### 方法 mutations/actions
~~~
methods: { //方法
// 对象形式
// ...mapActions({
// 'addErrorLog': 'addErrorLog'
// })
// 数组形式
...mapActions([
'addErrorLog'
]),
// 对象形式
// ...mapMutations({
// 'ADD_ERROR_LOG': 'ADD_ERROR_LOG'
// })
// 数组形式
...mapMutations([
'ADD_ERROR_LOG'
])
}
~~~
# store模块数据
~~~
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
}
~~~
