Vue 3 中，Vuex 4.x 集成与使用：概念、准备和实例操作指南

前端

2023-10-03 12:48:29

前言

Vuex 是 Vue.js 的官方状态管理库，它在 Vue 3 中得到了重大升级，称为 Vuex 4.x。本文将详细介绍如何在 Vue 3 中集成 Vuex 4.x，并通过实例操作演示如何使用 Vuex 管理项目中的状态。

概念和准备

概念

状态（State） ：应用程序中存储的数据，可以被组件访问和修改。
突变（Mutations） ：只能同步更新状态的函数。
动作（Actions） ：可以异步执行的函数，通常用于提交突变。
模块（Modules） ：将 Vuex 状态、突变和动作组织成独立的模块，便于管理大型应用程序。

准备

安装 Vuex 4.x：npm install vuex@next。
在 Vue 3 项目中创建一个 store.js 文件，用于创建 Vuex 实例。

import { createStore } from 'vuex'

export default createStore({
  state: {
    // 定义初始状态
  },
  mutations: {
    // 定义突变
  },
  actions: {
    // 定义动作
  },
  modules: {
    // 定义模块
  }
})

集成与实例操作

集成

在 Vue 3 的 main.js 文件中，将 Vuex 实例挂载到 Vue 根实例上：

import { createApp } from 'vue'
import store from './store.js'

const app = createApp({
  // ...
})

app.use(store)

app.mount('#app')

实例操作

在组件中，可以使用 useStore() 钩子函数访问 Vuex 实例，然后就可以使用 mapState(), mapMutations() 和 mapActions() 等辅助函数来访问状态、突变和动作。

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    // 获取状态
    const count = store.state.count

    // 提交突变
    store.commit('increment')

    // 触发动作
    store.dispatch('fetchUserData')

    return {
      count
    }
  }
}