vuex的运用

1.通过store创建vuex实例;

2.在vuex实例中,通过state存储数据;通过 this.$store.state获取定义的数据;

3.getter相当于vue的计算属性;

4.mutations用来创建方法函数;
   vue中的调用方式:this.$store.commit("add");

5.actions
   官方并不介意我们通过mutations直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值;
   vue中的调用方式:this.$store.dispatch("addFun");
 

实例:

import vue from 'vue';
import vuex from "vuex";

vue.use(vuex);

const store = new vuex.Store({
    state:{
        count:1,
    },
    getters:{
        getStateCount(){
            return state.count++
        }
    },
    mutations:{
        add(state){
            state.count = state.count+1;
        }
    },
    actions:{
        addFun(context){
            context.commit("add");
        }
    }
})

export default store;

评论