一、简介

Vuex 是 Vue.js 官方推荐的状态管理库。它用于在 Vue 应用中集中管理组件的状态，使得状态的变化更可控、更易于维护。

Vuex 的作用主要有以下几点：

1. 状态共享：Vuex 可以将组件的状态放在一个中央的容器中，实现多组件之间的状态共享，避免了组件之间的逐层传递数据的麻烦。
2. 状态响应：Vuex 的状态是响应式的，当状态发生变化时，相关的组件会自动更新视图，无需手动管理状态的变化和视图的更新。
3. 组织代码：Vuex 采用了模块化的方式组织代码，将状态、变化逻辑和提交变化的行为封装在一起，使得代码更清晰、易于维护。
4. 调试工具：Vuex 为开发者提供了一些调试工具，可以方便地追踪状态的变化，帮助开发者更快地定位和解决问题。

二、主要模块

1、State 仓库

State 就是 store 仓库，用来存放取数据。mapState 是为了简化代码，一次性获取多个 store 里的数据

// 获取单个数据
<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>
// 映射多个数据
<script>
import { mapState } from 'Vuex'
export default {
  computed: mapState({
    count: state => state.count,// 箭头函数可使代码更简练
    countAlias: 'count',// 字符串参数'count' 等同于 `state => state.count`
    countPlusLocalState (state) {
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      return state.count + this.localCount
    }
  })
  // 如果不需要别名，可以用数组形式
  computed: mapState([
    'count'// 映射 this.count 为 store.state.count
  ])
}
</script>

2、Getter 获取数据，加工数据

Getter 是相当于对 state 里的数据的一个加工处理，拿到的返回值就是处理后的值，但不允许在 getter 里取改变 store 里的值。

3、Mutation 突变 数据刷新

Mutation 是同步执行的，不能出现异步任务，比如 promise。触发 Mutation 后，store 里的值会立即刷新。Moutation 的变化是可以被 devtool 追踪到的。
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 和 mutation 关联（需要在根节点注入 store）。

4、Action 动作 方法

Action 支持异步任务，相当于为了弥补 Mutation 不能执行异步任务的遗憾，使其搭配异步任务完成某一个 Action。同时 Action 也是相当于把某些高频出现的包含业务逻辑的 methods 提取出来，作为一个公共的 Aciton 使用。

可以在组件中使用this.$store.dispatch('xxx')分发 action，或者使用 mapActions 辅助函数将组件的 methods 关联到 Action 调用（需要先在根节点注入 store）：

this.$store.dispatch("products/getAllProducts", xxxxx);

5、Modules 模块

项目比较大，逻辑比较复杂的时候，sotre、action、mutation 等相关代码会变得非常庞大。进行模块拆分，有利于提高代码的维护性和可靠性

三、与表单结合

如果我们直接把 Vuex 里的值绑定到的表单的v-model上。因为v-model是双向刷新的，而 Vuex 不允许直接修改值来刷新。所以我们需要使用另外一个变量，设置为计算属性（computed）。通过该属性的get方法来取出 Vuex 里存储的对应值，通过set来提交Mutation刷新 Vuex 里的值。如果需要设置该值的初始值，可以初始化的时候赋初始值。

<input v-model="message">
// -------
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24