【无标题】

Vuex是什么？

官网上说：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是一个可以存储全局状态的库，你可以随时往这个库添加或修改变量。并且在任何组件任何地点随时调用。

下载安装

CDN 链接

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

npm 亦或者是 yarn
npm install vuex@next --save
yarn add vuex@next --save

使用

在 src 文件下面新建一个 store 文件夹，在文件夹里面新建一个index.js文件，在里面写入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  	students : [
        { name : "张三",age : 18 },
        { name : "李四",age : 20},
        { name : "王二麻子",age : 2}
    ]
  },
  getter: {
  	newStuList(state) {
      return state.students.map(item => {
        return {
          name: `**${item.name}**`,
          age: item.age * 2
        }
      });
    }
  },
  mutations: {
 // 接收 2 个参数：state 为当前仓库的值，payload 为外面 commit 时传入的值
    ageChange: (state, payload) => {
      state.students.forEach(item => {
        item.age -= payload
      });
    }
  },
  actions: {
  },
  modules: {
  	// 接收 2 个参数
    // context 为当前的整个仓库对象，相当于组件里所使用的 this.$store
    // payload 仍然为从组件中所传入的参数
    ageChange: (context, payload) => {
      setTimeout(function () {
        // 相当于之前在组件中写的 this.$store.commit('ageChange',age); 
        context.commit("ageChange", payload);
      }, 3000);
    }
  }
})

这样我们的仓库就创建好了。

核心概念与使用

可以看见，我们这里有四个对象，state的作用是定义一个值，如果要获取state的值的话 this.$store.state。

getter 是在state基础上修改，进行一个二次封装，类似于vue的计算属性，mutations是获取state的值并且在组件中修改，修改方式如上，此时，其他组件中要使用修正后的数据的话，直接从 this.$store.getters 中拉取数据即可，不再需要其他的变动。

mutations就是在组件上面上修改。我们已经知道了组件如何从仓库中获取到数据。那么，组件如何更新仓库里面的数据呢？这就需要使用到 Mutation。

this.$store.commit("ageChange", age);

actions通过上一小节的学习，我们已经知道了使用 Mutation 可以更新仓库里面的数据，但是官方还提供了一个 Action，其官方说明如下：
Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

按照官方的说法，所有异步操作都应放在 Actions 中。上面我们使用 Action 来对这个异步操作进行改写。在组件中调用的话我们这样使用this.$store.dispatch(“ageChange”, age);
可以看到，我们将异步的操作写在 action 里面，通过 action 去 commit mutation 里面的方法。最后对 Mutation 和 Action 做一个简单的总结：

1.流程顺序
将“相应视图 -> 修改 State”拆分成了 2 个部分，视图触发 Action，Action 再触发 Mutation

2.角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改 State，理论上是修改 State 的唯一途径。
Action：业务代码、异步请求。

3.限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作 State。