一、Vuex单界面到多界面状态管理切换：

1.安装配置vuex，版本依赖

vue2的项目使用vuex3，vue3的项目使用vuex4

npm install vuex --save  这个指令默认安装Vuex4
npm install vuex@3    @代表安装指定版本的Vuex3

2.创建 store/index.js 文件

3.main.js 中引入 store/index.js

二、Vuex-devtools安装应用

在Chrome安装devtools插件打开项目之后：可以看到和实时监控state的数据

三、Vuex的基本使用

Vuex的响应式原理：

Vuex的store中的state是响应式的,当state中的数据发生改变时, Vue组件会自动更新.

这就要求我们必须遵守一些Vuex对应的规则:

提前在store中初始化好所需的属性.

当给state中的对象添加新属性时,使用下面的方式:

➢方式一: 使用Vue.set(obj, ‘newProp’, 123）

➢方式二:用新对象给旧对象重新赋值

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，所有修改State的操作必须通过Mutation进行，Mutation的同时提供了订阅者模式供外部插件调用获取State数据的更新。所有异步接口需要走Action，常见于调用后端接口异步获取更新数据，而Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。Vuex运行依赖Vue内部数据

1、$store.state

通过这个方式，能直接使用state里的数据。

点击按钮发现，我们无法更改$store.state.counter

2、mutations

要想修改state的数据必须通过mutations：

三、Vuex核心概念

Vuex有几个比较核心的概念:

State

Getters

Mutation

Action

Module

1、state

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护，存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则。

2、vuex-getters的使用：

其实可以当成组件共享的计算属性

例：写一个对象数组，找出里面age>20的对象

1）普通写法：这种写法只能在需要的每个组件里都写上这个计算属性

2）写在getters里面 每个组件都可以直接使用：

 其他组件也可以获取到

---

在getters的方法里也可以将getters作为参数，调用getters里的其他方法：

3、Mutation状态更新：

state里的数据改变只能通过Mutation！（上面已经解释，这里不做赘述）

我们来看Mutation中方法参数传递：

mutation的提交风格：

之前的commit只是一种普通的提交风格Vue还提供了另外一种风格,它是一个包含type属性的对象

双向绑定机制，需要new一个Vue对象来实现“响应式化”，所以Vuex是一个专门为Vue.js设计的状态管理库。

vue-mutations的类型常量定义步骤

可以在store里加一个js文件：

6、vuex-actions的使用：

mutation里的所有代码都不能有异步操作：

如果有异步操作，就用actions来替代Mutations

但是actions也不能直接修改state里的数据，

如果有一个异步操作需要修改state里的数据，那么正确的方法应该是：index.js:

commit是提交mutatious的同步操作，

dispatch是分发actions的异步操作

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)

点击触发方法，通过dispatch("aUpdateInfo")来触发actions里面的方法 aUpdateInfo ，方法内通过commit来触发mutation里面的方法，更新state里面的数据

context后面也可以接一个传递参数payload：

但是通常携带的信息不只一个的时候怎么办呢：可以将payload作为一个对象：

更简洁优雅的写法：Promise：

7、vuex-modules的使用：

Vue使用单-状态树,那么也意味着很多状态都会交给Vuex来管理.当应用变得非常复杂时,store对象就有可能变得相当臃肿，为了解决这个问题，Vuex允许我们将store分割成模块(Module),而每个模块拥有自己的state. mutations、actions, getters等

1）modules的state：

这里只能用$store.state.a.name而不是modules.a

因为在Devtools里可以看到 a会自动变成state的一个对象：

---

2）modules的mutation：

3）modules的getters：

论是定义在store里的getters还是定义在modules里的getters 调用的方法都相同：

我们都知道getters里的方法可以将本身getters作为参数来调用里面的其他函数：

而且，在modules中的getters还可以将store里的state作为参数：

4）modules的actions：

和store几乎一样，只不过调用方式不一样罢了