Vue3 中 Vuex 的使用方法

在 Vue3 的项目开发中，Vuex 作为一个专为 Vue.js 应用程序开发的状态管理模式，发挥着至关重要的作用。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下面我们就来详细探讨一下 Vue3 中 Vuex 的使用方法。

需要安装 Vuex。在项目目录下，通过 npm install vuex@next 命令进行安装，因为 Vuex 4 是专门为 Vue3 设计的版本。

安装完成后，创建一个 store 目录，在其中新建 index.js 文件来配置 Vuex 实例。在这个文件中，我们首先导入 createStore 函数，它是 Vuex 用来创建 store 实例的核心方法。

接着，定义 state。state 用于存储应用的状态数据，例如用户信息、商品列表等。它就像是一个全局的数据仓库，所有组件都可以访问其中的数据。比如：

const state = {
    userInfo: null,
    productList: []
}

mutations 是修改 state 的唯一地方。它接收 state 作为第一个参数，通过特定的方法来修改 state 中的数据。例如：

const mutations = {
    SET_USER_INFO(state, info) {
        state.userInfo = info;
    },
    ADD_PRODUCT(state, product) {
        state.productList.push(product);
    }
}

actions 主要用于处理异步操作，比如发送网络请求。它可以调用 mutations 来修改 state。例如：

const actions = {
    async fetchUserInfo({ commit }) {
        const response = await fetch('/api/userInfo');
        const data = await response.json();
        commit('SET_USER_INFO', data);
    }
}

最后，通过 createStore 函数创建 store 实例并导出：

import { createStore } from 'vuex';

const store = createStore({
    state,
    mutations,
    actions
});

export default store;

在 Vue 组件中使用 Vuex 也很简单。通过计算属性来获取 state 中的数据，通过 methods 来调用 actions。例如：

<template>
    <div>
        <p>{{ userInfo.name }}</p>
        <button @click="fetchUserInfo">获取用户信息</button>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const userInfo = computed(() => store.state.userInfo);

const fetchUserInfo = () => {
    store.dispatch('fetchUserInfo');
}
</script>

掌握 Vue3 中 Vuex 的使用方法，能够让我们更好地管理应用的状态，提升开发效率和代码的可维护性。