Vuex 详解

Vuex 是什么
单界面的状态管理
多界面状态管理
Vuex 基本使用
State 单一状态树
Getters
- Getters 作为参数和传递参数
Mutation
- Mutation 状态更新
- Mutation 传递参数
- Mutation 提交风格
- Mutation 常量类型
- Mutation 同步函数
Action
- Action 的分发
- Action 返回的 Promise
Module
- Module 局部状态
- Module 中 Action 的写法
项目结构

Vuex 官网：https://next.vuex.vuejs.org/zh/index.html

Vuex 是什么

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

Vuex 也集成到了 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

状态管理到底是什么？

可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用；如果我们自己封装实现这样的功能也可以，但是缺少了 “响应式”。
如果需要在多个组件间（例如兄弟组件）共享状态，使用 Vuex 就可以了。

有什么状态是需要我们在多个组件间共享的呢？

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

单界面的状态管理

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

代码示例：

counter 需要某种方式被记录下来，也就是 State
counter 目前的值需要被显示在界面中，也就是 View
界面发生某些操作时（如用户点击，或是用户的 input）需要去更新状态，也就是 Actions

多界面状态管理

Vue 已经实现了单界面的状态管理，但是如果是多个界面呢？

多个界面都依赖同一个状态：一个状态改了，多个界面需要进行更新
不同界面的 Actions 想修改同一个状态

Vuex 背后的思想：

将共享的状态抽取出来，统一进行管理
之后每个视图，需要按照规定好的某种方法，进行访问和修改操作

Vuex 状态管理图例：

Vuex 基本使用

在 store/index.js 中管理状态：

import { createStore } from "vuex";export default createStore({state: {counter: 0},mutations: {increment(state) {state.counter++;},decrement(state) {state.counter--;}},actions: {},modules: {},getters: {},
});

在 main.js 中将 store 挂载到 Vue 实例中

在其他 Vue 组件中，通过 this.$store 获取到 store 对象

通过 this.$store.state 来访问状态
通过 this.$store.commit('xxx') 来执行 mutations 中的方法，从而修改状态

为了使 Vuex 可以更明确的追踪状态的变化，不要直接改变 store.state.count 的值，通过 mutations 中的方法来修改 state 中的状态。

State 单一状态树

如果状态信息是保存到多个 store 对象中的，那么之后的管理和维护等等都会变得特别困难，所以 Vuex 使用了单一状态树来管理应用层级的全部状态、

单一状态树能够让我们以最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

我们需要从 store 中获取一些 state 变异后的状态，比如下面的 store 中：

获取学生年龄大于20的个数：

在组件中使用 computed
使用 Vuex 的 getters：

Getters 作为参数和传递参数

如果我们已经有了一个获取所有年龄大于 20 岁学生列表的 getters，那么代码可以这样来写

getters 默认不能传递参数，如果想要传递参数，需要让 getters 本身返回另一个函数；
比如上面的案例中，我们希望根据 ID 获取用户的信息：

Mutation

Mutation 状态更新

Vuex 的 store 状态的更新唯一方式：提交 Mutation

Mutation 主要包括两部分：

字符串的事件类型 (type)
一个回调函数 (handler)，该回调函数的第一个参数就是 state

mutation 的定义方式：

通过 mutation 更新：

Mutation 传递参数

在通过 mutation更新数据的时候，有时候需要希望携带一些额外的参数

参数被称为 mutation 的 载荷 (Payload)

示例代码：

多个参数的传递以对象的形式进行，也就是 payload 是一个对象：

Mutation 提交风格

上面的通过 commit 进行提交是一种普通的方式

Vue 还提供了另外一种风格，它是一个包含 type 属性的对象

Mutation 中的处理方式是将整个 commit 的对象作为 payload 使用，所以代码没有改变：

Mutation 常量类型

当项目增大时，Vuex 管理的状态越来越多，需要更新状态的情况越来越多，意味着 Mutation 中的方法越来越多。方法过多，导致使用者需要花费大量的精力去记住这些方法，甚至是多个文件间来回切换，查看方法名称，甚至如果不是复制的时候，可能还会出现写错的情况

在各种 Flux 实现中，一种很常见的方案就是：使用常量替代 Mutation 事件的类型，我们可以将这些常量放在一个单独的文件中，方便管理

创建一个文件：mutation-types.js，并且在其中定义我们的常量

定义常量时可以使用 ES2015 中的风格，使用一个常量来作为函数的名称：

store 中用常量字符串来定义函数：

组件中使用常量字符串调用 store 的 mutations 更改 state：

Mutation 同步函数

通常情况下，Vuex 要求我们 Mutation 中的方法必须是同步方法，如果使用了异步操作，devtools 将不能很好的追踪 state 中的数据的改变。

Action

Action 类似于 Mutation，但是是用来代替 Mutation 进行异步操作的

Action 的基本使用：

context 是和 store 对象具有相同方法和属性的对象

也就是说，我们可以通过 context 去进行 commit 相关的操作，也可以获取 context.state 等
注意，context 和 store 并不是同一个对象

Action 的分发

在 Vue 组件中，如果我们调用 action 中的方法，那么就需要使用 dispatch

它同样支持传递 payload：

Action 返回的 Promise

Promise 经常用于异步操作，在 Action 中，我们可以将异步操作放在一个 Promise 中，并且在成功或者失败后，调用对应的 resolve 或 reject

示例代码：

Module

Vue 使用单一状态树，那么意味着很多状态都会交给 Vuex 来管理

当应用变得非常复杂时，store 对象就有可能变得相当臃肿
为了解决这个问题，Vuex 允许我们将 store 分割成模块 (Module)，而每个模块拥有自己的 state、mutations、actions、getters 等

Module 局部状态

注意：虽然的 doubleCount 和 increment 都是定义在对象内部的，但是在调用的时候，依然是通过 this.$store 来直接调用的

Module 中 Action 的写法

局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

如果 getters 中也需要使用全局的状态，可以接受更多的参数

项目结构

良好的项目结构可以使代码更加清晰嘛，官方推荐的项目结构： 1

【Vue.js 知识量化】Vuex 详解相关推荐

【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...
【Vue.js 知识量化】vue-router 详解
vue-router 详解认识路由后端路由(了解) 前端路由 URL 的 hash HTML5 的 history 模式(5 种) vue-router 安装和使用 vue-router 路由的默 ...
【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
【Vue.js 知识量化】基础语法
Vue.js 基础语法 Vue.js 安装插值操作 Mustache:将 data 中的文本数据插入到 HTML v-once:使元素和组件只渲染一次 v-html:解析 HTML 并展示 v-t ...
vue.js 3.0 Bate 详解【持续更新】
前段时间尤大在b站进行了vue.js 3.0 Bate的直播下面这篇文章就配合示例来分析,带大家一起看一下vue3.0具体都发生了哪些改变如有不全错误之处,还请大家多多指教包涵,下方留言或私信我及 ...
vue.js基础之过滤器详解
过滤器介绍过滤器本质上就是函数,作用在于用户输入数据后进行处理并返回一个结果.使用管道符(|)连接. 分类内置过滤器实例: {{'abc' | uppercase}} //'abc' => ...
【Vue.js 知识量化】Promise
Promise 认识 Promise 定时器的异步事件 Promise 基本使用 Promise 三种状态 Promise 链式调用认识 Promise Promise 是异步编程的一种解决方案,为 ...
Vue | Vue.js 全家桶 - Vue-Router详解
computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...

【Vue.js 知识量化】Vuex 详解