快速上手

Shimon Zhan2022年4月19日

Vuex
快速上手

大约 6 分钟

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

我们可以从下面一个简单的状态管理案例开始。

new Vue({
  // state
  data() {
    return {
      count: 0,
    };
  },
  // view
  template: `<div>{{ count }}</div>`,
  // actions
  methods: {
    increment() {
      this.count++;
    },
  },
});

这个状态自管理应用包含以下几个部分:

state: 驱动应用的数据源；
view: 以声明方式将 state 映射到视图；
actions: 响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意:

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

此时，我们就需要进行复杂的组件通信，这在开发中很不方便。

所以此时，我们就需要 Vuex!

Vuex 介绍

每一个 Vuex 应用的核心就是 store (仓库)。“store”基本上就是一个容器，它包含着您的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

您不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的 Store

const store = Vuex.createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

...

Vue.createApp({}).use(store).mount('#app')

现在，可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更:

store.commit("increment");

console.log(store.state.count); // -> 1

此时，任何使用了 store.state.count 的组件都会得到对应的更新。

通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让您的意图更加明显，这样您在阅读代码的时候能更容易地解读应用内部的状态改变。

Vuex 的意义

在引入 Vuex 之后，Vuex 会被全局挂载，这意味着访问任何一个组件的 this.$store 都会指向同一个——我们引入的 Vuex。

也就是说，我们可以在所有组件内使用 this.$store.state 来共享同一份数据，并在数据发生改变的时候得到更新。

State

State 即是全局共享的那一份数据。

每个使用了 State 组件一般只使用了全局 State 的少量数据，而且对其他部分的数据结构并不知情。

由于状态被全局共享，为了整个应用的稳定考虑，那么就不可能允许任何一个组件随意改变这个状态，否则一旦删除或改变了一些被其他组件使用的状态，就可能会造成其他组件异常。所以 State 是一份响应式的只读属性。

警告

直接改变 state 是严厉禁止的!!!!

Mutation

因为上面的安全缘故，State 被设置只读，那么最安全的方式就是预先设置好一系列改变方式，来有条理、安全地改变 State 的数据。

Mutation 就是这样是设置的。所有 Mutation 都是一个函数，可以给这个函数传递参数。当组件想要改变状态时，他们需要通过 store.commit(<mutation函数名>, <参数>) 的方式，来触发对应的 Mutation 函数，在 Mutation 函数执行的过程中，按照预先设置好的方法改变 State。

所以总之，Mutation 就是一系列设置好的函数，每个函数是一个改变 State 的方式，组件想要改变 State 状态的时候，就调用这些方法。这样就达到了，既可以让组件改变状态，又阻止了组件随意改变状态，保障了整颗状态树的稳定性。

在 Vuex 中，还设置了 Getter 和 Action 两种概念。

Getter

Getter 是 State 的派生。

有时候我们不是直接使用 State 中的数据，而是需要从 store 中的 state 中派生出一些状态，也就是对 State 的数据进行一些处理再使用。

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

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

Action

有些时候，我们可能会需要连续改变 state，这就意味着我们要接连触发多个 mutation，但是如果 mutation 是异步的(比如包含了网络操作)，组件就不知道何时 mutation 会执行完进行 state 的改变，这个时候 Action 就被设计出来。

Action 类似于 mutation，不同在于:

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

所以，这样组件只需要调用 Action，把多次提交 mutation 的任务交给 Action，这样就完成了复杂 mutation 的提交。

更多详细的东西大家还是要看文档!

Vuex 模块化

可以想象，随着整个网站架构的变大，网页数的扩张，状态树将会越来越庞大，可能有数十上百个 state 子项和同等数量级的 mutation。

所以自然，Vuex 也支持模块化。

每个子 vuex 包含了自身完整的 state、mutation 与 action，通过主 Vuex 的 module 属性引入，在使用时会把对应的项目注入自身的对应部分。

Vuex 案例

点击此处

文档地址

文档地址: Vuex 教程open in new window

快速上手

# Vuex 介绍

# 最简单的 Store

# Vuex 的意义

# State

# Mutation

# 更多

# Getter

# Action

# Vuex 模块化

# Vuex 案例

# 文档地址