vuex2.0

vuex是一个专为vue.js应用程序建立的状态管理模式，它采用集中式存储管理应用的所有组件的状态。

vuex中的几个重要的概念：store、state、mutation、action、getter

store：vuex将组件中的所有状态放到store中

state：组件状态，store的一次快照

mutation：vuex只允许提交一个mutation来改变state，mutation中只允许进行同步操作

action：调用commit触发mutation函数，可以进行异步操作

一个完整的store包括：state、mutation、action、getter

代码：//创建store实例

const store = new Vuex.Store({
    state:{
        state1:'state1',
        state2:'state2'
    },
    mutations:{
        mutation1(state,payload){
            state.state1 = payload.value;
        },
        mutation2(state,payload){
            state.state2 = payload.value;
        }
    },
    actions:{
        action1(context,payload){
            context.commit('mutation2',payload);
        }
    }
})

//在根组件中注入store，在各子组件中调用: this.$store.state.state1(使用state)，this.$store.commit('mutation1',payload)--(提交一个mutation)，this.$store.dispatch('action1',payload) --(dispatch一个action)

推荐在computed中设置获取state值供组件使用，使用mapState（）辅助函数，将组件中的方法映射为commit mutation/dispatch action,使用mapMutations/mapActions

//组件中使用

export default{
    computed:{
        ...mapState({
            items:"items",
            localItems(state){
                return state.state1 + this.data1;
            }
        })
    },
    methods:{
        ...mapMutations({
            'mutation1',
            'mutation2'
        })
        ...mapActions({
            'action1',
            'action2'
        })
    }
}