14.vuex相关操作

状态管理有5个核心，分别是state、mutation、action、getter以及module。
项目中store注入到vue实例后，可直接this.$store获取。
1.state

state:{
        count:10
    }

组件中状态对象（store中的state）

{{ this.$store.state }}

2.mutation
将state通过参数形式传入，获取state中的数据并进行处理，中通过store.commit来触发状态变更。
store下定义

mutations:{
        increment(state){
            return state.count++;
        },
        decrement(state){
            return state.count--;
        }
    }

组件中定义一个函数去接收

methods:{
            decrease(){
                this.$store.commit('decrement');
            }
        }

3.actions
不是必须的，需要做异步操作（网络请求）时可用到。

actions:{
        //context参数起到承上启下的作用,直接拿到mutations中定义的函数
        actionIncrement(context){
            context.commit('increment');
        }

组件中通过定义一个函数来接收

add(){
                this.$store.dispatch('actionIncrement');
            }

当使用actions之后，mutations中的方法将通过actions来调用，而不是直接在外部访问mutation中的方法。
调用actions中的方法：

this.$store.dispatch

注意：
1.actions提交的是mutations，而不是直接变更状态。
2.actions可以包含任意的异步操作。

4.getter
对向前状态中的值进行过滤和计算。

getters:{
        //对state状态对象进行过滤或计算,可将state作为参数传入
        getState(state){
            return state.count>0 ? state.count : 0
        }
    }

组件获取getters中的方法

this.$store.getters

5.module
当项目中所需管理的数据较多，可将其分成几类模块进行分类管理。

const moduleA = {
    state: {...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const moduleB = {
    state: {...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const store = new Vuex.Store({
    modules:{
        a:moduleA,
        b:moduleB
    },
    state:{...}
})

调用a中的state

this.$store.state.a