大白话讲解Vuex

Vuex是什么

上面说的是官方原话，翻译成大白话就是：Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象里面的数据，是不可以直接进行修改的，你得按照Vuex提供的方式来修改。

Vuex的特点

1. Vuex的状态存储是响应式的。就是当你的几个组件都使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据。
2. 不能直接修改Vuex的状态。它的修改方式并不能像全局变量那样来直接修改，而是通过mutations来实现修改，这样做的好处是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。
3. Vuex存储的数据会在页面刷新之后重置为初始化状态，并不能让数据持久化。

Vuex适用场景

如果项目是个小型的应用，组件不多，组件之间的状态依赖不多，关系清晰容易维护，也就是说不同组件之间很少有数据之间的关联的话，那么你大可不用Vuex来开发。 如果你开发的是较大型的应用，出现多个组件共同依赖一个状态，这个状态相当于我们的全局对象数据，其他组件的改动，都会影响到这个公共数据；反之，这个公共数据的修改也会影响到关联它的组件，再比如说组件与组件之间在不同的路由中，它们之间无法进行数据传递，这时就可以借助Vuex帮我们来实现公共数据的管理。

Vuex的使用

首先要在项目中安装vuex

cnpm install vuex --save

然后我们在项目的根目录中创建一个store文件夹，在这个文件夹下创建index.js文件，用于存放vuex的数据。

创建仓库Store

要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

 //创建一个 store
 const store = new Vuex.Store({});

创建好了仓库之后，就要先了解一下vuex的几个核心

State

State类似全局对象，含了整个应用层级的所有状态，用于存放这些全局变量。

 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        number:1 
    }
 });

上面代码我们创建了一个全局状态变量，值为1。state中的状态变量被各个组件关联着，一旦发生变化，相应的组件状态也会随之改变。这里我们可以借助vue-devtool来查看我们定义在vuex中的全局状态。如下图所示：

Getters

getters的作用类似与vue中的computed计算属性，当我们需要在data的基础上再派生一些状态的时候，就会使用computed来实现。同样，当我们需要从 state 中派生出一些状态的时候，就会使用到 getters ，可以将 getters 理解 state 的计算属性。getters 接受 state 作为其第一个参数：

 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      number:1
    },
    //派生出来的状态
   getters:{
      numberPro:state => {
        return state.number+10
      }
    }
 });

这样我们就在state.number基础中派生出了一个新的状态numberPro。

Mutations

Vuex中的状态不能随意修改，要修改必要按照Vuex提供的方式才能修改，Vuex给我们提供修改仓库store中的状态的唯一办法就是通过提交mutation。我们来看看如何定义一个mutation，它和上面的getters一样，会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    number: 1
  },
  mutations: {
    changeNumber (state,value) {
      // 变更状态
      state.number=value
    }
  }
})

我们再mutations中定义了一个叫changeNumber的函数，用于更改state中number的值。Vuex要求我们要想通过mutations更改内容，就必须提交mutation，使用方式如下：

store.commit('changeNumber',7);

这样就把state中的number从原来的1更改成7了。 以上3个核心概念了解清楚之后，我们来看看具体如何使用这些全局状态变量，先对index.js代码做如下整理：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
let state = {
  number: 1, 
};
let mutations = {
  changeNumber(state, val) {
    state.number= val;
  },
};
const store = new Vuex.Store({
  state,
  mutations,
});

export default store;

然后再项目中main.js做全局引入

import store from './store'

在项目中获取全局变量：

this.$store.state.number;

在项目中修改全局变量：

this.$store.commit("changeNumber", 7);