Vue2.0 学习笔记六 VueX

1. 什么是VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。

1.1 单页面的状态管理

1.2 多界面状态管理

Vue已经帮我们做了单界面的状态管理，但是如果多个界面同时依赖于一种状态（其中一个界面的状态改了，多个界面也需要及时更新）

这个时候我们就需要Vuex来帮我们管理这个状态。我们要做的就是将共享的状态抽取出来，交给我们的VueX统一进行管理。

2. VueX的基本使用

1. 在src目录下创建store文件，在文件下创建index.js

2. 在main.js入口文件中导入，并挂载到Vue 实例

3. 使用

3. VueX核心概念-State

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

4. VueX核心概念-Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

案例

VueX定义页面index.js

组件页面：

效果图：

5. VueX核心概念-Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

5.1 提交载荷（Payload）

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数。参数被称为是mutation的载荷(Payload)。

5.2 mutations响应式规则

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

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

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

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

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

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

Vue.set方法增加新对象，Vue.delect删除。

图来自小码哥教育：

5.3 常量替代 Mutation 事件类型

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

在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.

5.4 Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数，actions才是处理异步函数。

主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.

但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.

6. VueX核心概念-Action

Action 类似于 mutation，不同在于：

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

6.1 Actions基础使用

6.2 Actions的参数传递

Actions的参数传递与Mutaion相同。

vueX配置页面

组件页面：

效果图：

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

7. VueX核心概念-Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

调用子组件：

详细文档参考：官网

8. 项目结构!