Vuex 是一个专门设计为 Vue.js 应用程序状态管理的库。它将应用状态集中管理在单一位置，使得开发者可以一致地操作状态，从而提高应用的可维护性和可测试性。最新的 Vuex4 版本引入了多个改进和新特性，本篇指南将详细指导你如何在 Vue.js 项目中安装和配置 Vuex4，以及如何有效管理应用状态。从核心概念、实践应用直至高级功能，本文将全面深入地阐述 Vuex4 的使用之道。

确保你的 Vue.js 项目已经通过 Vue CLI 初始化。安装 Vuex4 的过程相对简洁，通过以下命令即可完成：

vue add vuex

在安装过程中，Vue CLI 会询问你一些项目信息，包括是否需要使用单文件组件和更新兼容性配置。按照提示进行设置即可。

接下来，在 src 目录下找到 main.js 文件，并引入 Vuex：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

这里，通过 store 对象实例化 Vuex，并将它注入到 Vue 实例中。

状态（State）

状态是应用中唯一不变的真相，所有组件共享的状态应该存放在 store 的 state 属性中。状态是响应式的，可以通过 mapState 辅助函数在组件中访问：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    incrementCounter() {
      this.$store.commit('INCREMENT')
    }
  },
}

actions

处理异步操作和副作用的组件，可以通过 dispatch 方法在组件中执行：

export const actions = {
  increment(context) {
    context.commit('INCREMENT')
  },
}

mutations

用于修改 Vuex 的状态，它们是同步操作：

export const mutations = {
  INCREMENT(state) {
    state.counter++
  },
}

getters

计算状态的值，可以接收一组参数，该参数是其它 getter 返回的结果：

export const getters = {
  getCounter: state => state.counter,
}

在 Vue 组件中使用 Vuex，需要从 store 导入所需的模块：

import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['counter']),
  },
  methods: {
    ...mapActions(['incrementCounter']),
  },
}

这样便可以在组件中轻松访问状态并触发 actions：

incrementCounter() {
  // 触发 actions 更新状态
  this.incrementCounter()
}

中间件

中间件允许你对 actions、mutations 和 getters 进行预处理，以及进行错误处理和日志记录。预设中间件如下：

// 使用中间件，比如 `middlewareA`
export const actions = {
  asyncIncrement(context) {
    try {
      await delay(1000)
      context.commit('INCREMENT')
    } catch (error) {
      console.error('Error performing async increment', error)
    }
  },
}

// `middlewareB` 可以在所有 actions 上应用，修改其行为
const middlewares = [
  // ...
  {
    async (store, action, next) {
      console.log('Executing action before')
      await next(action)
      console.log('Executing action after')
    },
  },
]

持久化存储

实现状态的持久化存储，可以借助 vuex-persistedstate 插件：

npm install vuex-persistedstate

在 store.js 配置插件：

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [persistedState()],
})

常见错误

• 错误注入：确保 Vue 实例正确注入 store，所有 Vuex 的方法和 getter 需通过 this.$store. 访问。
• 状态更新的时机：避免在条件语句中直接修改状态，应通过 actions 触发 mutations。

优化技巧

减小 state 的规模

将状态分割到多个模块中，每个模块专注于管理特定功能或数据集，以提高代码的可读性和可维护性。

利用 getter 与计算属性

使用 getter 计算状态的多个值，避免在模板中重复计算相同的值。

错误处理与最佳实践

• 避免过大的 state：状态分割，每个模块专注于管理单一功能或数据集。
• 合理使用 getter：getter 计算状态值，避免模板中的重复计算。
• 错误处理：在 actions 中妥善处理错误，使用 try-catch 结构捕获异常。

通过遵循以上指南和实践，你可以更高效地管理 Vue.js 应用程序的状态，提高应用的可维护性和可测试性。在与团队合作或维护大型项目时，这些实践有助于你保持代码的整洁和高效。