1.Vuex的定义：

Vuex是一个专门为Vue.js应用程序开发的一个状态管理模式

2.Vuex的作用

当多个组件同时需要访问一个变量时，Vuex则可以轻松满足这个需求

3.Vuex使用前的配置

（1）首先需要通过命令安装Vuex npm install Vuex

（2）创建一个新的文件夹名为store，在store里在创建一个index.js

代码为：

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

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
    modules: {}

})

//3.导出store独享

export default store

（3）在main.js里挂载

Vuex的实例图

从图中可以清楚的看到state可以用以多界面，但是要修改state需要通过Mutations来修改，不能在组件里直接修改，因为这样devtools便不能跟踪state的修改，在后续出了问题不能清楚的看到是那个界面修改了state。action则是处理异步操作，主要是后端请求。后面会逐个分析上面创建对象里面的意义。

4 vuex的五大核心属性

4.1 state

存放状态的地方，与data类似

4.2 mutations（不能进行异步操作）

用于对state状态进行修改，如图所示

调用：

需要传参时，比如需要点一个按钮使得conter加五，另一个conter加十，如何实现？

4.3 actions（进行异步操作）

这里通过一个实例来解释一下，如果这里需要在一秒后对person中的name属性进行修改

首先我们将这个方法放在mutation中

虽然数据是渲染出来了，但是vue-devtool中却没有改变

所以我们需要将异步操作放入action中：

vue-devtool也正常更新数据

所以异步操作action里面执行，包括数据请求等。这里可以看出mutation中的方法是用commit调用，但是action中的方法是用display调用。

4.4 getters

类似于vue中的computed属性 调用方式：

this.$store.getters.方法名

4.5 modules

因为vuex是一个单一状态树，所以只有一个store实例，但是这样有时状态多了过后就会显得臃肿，所以需要modules来分模块，这样我们就可以把各个模块的数据分开

调用方法，比如调用a

this.$store.state.a.

因为a其实是放在state里面的，其它调用方法也类似 mutation调用就是

this.$store.commit(')

所以需要注意各个模块命名别重名