Vuex使用教程

 vuex是组件状态管理工具。可以实现多组件之间数据的共享。

以下是vuex的流程图： 

业务逻辑：

1、state中的数据渲染到页面上

2、组件调用dispatch这个API传给actions（其中有两个参数，一个是context，相当于mini版的store，里面包含dispatch等API；另外一个是传的value值）

3、组件调用commit这个API传给mutations（其中有两个参数，一个是state；另外一个是传的value值）

4、mutations操作和修改数据

逐步分析：

1、模板中使用state中的数据，渲染到界面上。

方法如下：

store/indx.js中state数据的值，如下所示：

state: {
    count:0
  },

模板里面能看到vc身上的所有属性。

组件模板中使用state中的数据渲染到界面，如下所示：

<h3>展示count的值:{{$store.state.count}}</h3>
<button @click="add">加1</button>
<button @click="subtract">减1</button>

2、组件调用dispatch这个API传给actions，如下所示：

（上边模板调用了add方法）

methods:{
    add(){
      //此处的'jia'是作为action中的属性名（也可以说是方法名）
      this.$store.dispatch('jia',2);
    },
    subtract(){
      //减法操作
    }
  }

3、组件调用commit这个API传给mutations，如下所示：

（当向mutations传属性名时把其大写）

actions: {
    jia(context,value){
      console.log('jia被调用了',context,value);
      //context代表mini版的store，只包含部分属性
      //value代表传来的值
      context.commit('JIA',value)
    }
  },

4、mutations操作和修改数据

 mutations: {
    JIA(state,value){
      console.log(state,value);
      state.count += value;
    }
  },

如果没有网络请求或者业务逻辑，可以直接越过actions去到mutations。

如下所示：

methods:{
    add(){
      // this.$store.dispatch('jia',2);
    },
    subtract(){
      this.$store.commit('jia',2);
    }
  }

暂时先写到这里！如有不足，请指正！！！