（1）Vuex 介绍

• Vuex

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

• 状态管理

状态管理模式、集中式存储管理，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后，将这个对象放在顶层的Vue实例中，那么，多个组件就可以共享这个对象中的所有变量属性了。

• Vuex 使用场景

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题，这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

• • 比如用户的登录状态、用户名称、头像、地理位置信息等等。
  • 比如商品的收藏、购物车中的物品等等。

（2）单界面到多界面状态管理

• 单界面状态管理
  • State：就是我们的状态。姑且可以当做就是data中的属性。
  • View：视图层，可以针对State的变化，显示不同的信息。
  • Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

我们之前写的都是单界面状态管理。

• 多界面状态管理

（3）Vuex 安装和使用

• 安装

npm install vuex --save

• 创建vuex的管理文件夹

• vuex 的管理文件 vuex/index.js

/*  vuex/index.js  */

import Vue from ‘vue‘
import Vuex from ‘vuex‘

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

// 2. 创建对象
const store = new Vuex.Store({

})

// 3. 导出 store
export default store

• 挂载到 main.js

Vue-8-webpack