Vuex

介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

组成

vuex由五个部分组成，分别是State，Mutation，Action，Module，Getter。

属性	解释
State	共享状态（即变量），类似于data
Mutation	更改vuex的store中state的唯一方法，只有通过提交mutation才能修改状态（变量值）
Action	类似mutation，修改store中的状态。但是刚才说过只有通过提交mutation才能修改状态，所以Action也是通过提交mutation修改store中的状态 ，与Mutataion不同的是Action支持异步操作
Module	模块，在大型项目中为了方便状态的管理和协作开发将store拆分为多个子模块（modules），每个子模块拥有完整的state、mutation、action、getter。（这篇不会介绍这个）
Getter	基于state的派生状态，可理解为组件中的计算属性

安装

npm install vuex --save

vue2的项目只能使用vuex3版本

使用方法

在src目录下面新建store文件夹=>创建index.js文件

import Vue from "vue";
import Vuex from "vuex";
​
//main.js中引入Vue 和Vuex,然后使用Vuex
Vue.use(Vuex);
​
//响应组件的动作这里可以异步加载
let actions = {
  numberIncrease(context, value) {
    //提交事务（‘调用的方法’，值）
    context.commit("NUMBER_INCREASE", value);
  },
  numberMinus(context, value) {
    context.commit("NUMBER_MINUS", value);
  },
  
  //延迟添加
  delayAddNumber(context, value) {
    setTimeout(() => {
      context.commit("NUMBER_INCREASE", value);
    }, 2000);
  },
  //当偶数时添加
  onEvenAddNumber(context, value) {
    if (context.state.number % 2 === 0) {
      context.commit("NUMBER_INCREASE", value);
      return;
    }
    alert("onEvenAddNumber");
  },
};
​
//用于直接操作数据 这里面的操作是同步的  mutations中的方法名字建议大写这样方便区分
let mutations = {
  NUMBER_INCREASE(state, value) {
    state.number += value;
  },
  NUMBER_MINUS(state, value) {
    state.number -= value;
  },
};
​
//state储存数据类似于data
let state = {
  number: 10,
};
​
//计算属性
let getters = {
  bigNumber(state) {
    return state.number * 10;
  },
};
​
//抛出store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters,
});
​

组件中的使用

//this.$store.dispatch("actions中的方法名", 传递的值);
​
this.$store.dispatch("numberIncrease", this.number);

标签中取出State或getter的值

取出state的值

{{ $store.state.属性民 }}

取出getter的值

{{ $store.getters.方法名 }}

\