vuex的核心概念和运行机制

vuex的五大核心特性
1.state 存储vuex所有的数据，类似于vue中data数据

//1. state  存储vuex所有的数据，类似于vue中data数据
state:{
    num:1,
    list: [],
}

2.mutations 方法对象，同步修改state中的数据 类似于Vue中methods

mutations:{
    changeNum(state,payload){
        state.num = payload;//修改state中的数据
    }
}

//组件中调用mutations中的方法
this.$store.commit("changeNum", 10);

3.actions vuex中用来异步修改state中的数据，他调用mutations中的方法

actions:{
    //context执行上下文
    changeNums(context,payload){
        
       	//间接调用mutations方法
        context.commit("changeNum", payload);
    }
}

//actions如何进行调用呢？通过dispatch方法进行调用的
this.$store.dispatch('changeNums',10);

4.getters对象 用来对vuex中数据进行逻辑运算，类似于vue中计算属性

getters:{
    totals(){
        return 100;
    }
}
//组件中调用 getters属性调用
{{this.$store.getters.totals}}

5.moudules对象 模块化，就是把vuex分为多个模块

//导入模块
import m1 from "./m1.js";
modules:{
    m1, m2
}

vuex运行机制
在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中