当前位置：首页 > news >正文

在Vue3中使用Vuex

news 来源：原创 2025/5/7 14:10:33

1. 什么是 Vuex 以及为啥要用它

想象一下你正在开发一个大型的 Vue 3 应用，就好比你在建造一座超级大的商场。商场里有很多店铺，每个店铺都有自己的商品信息、库存数量等。在 Vue 应用里，不同的组件就像是这些店铺，它们可能都需要共享一些数据，比如用户的登录状态、购物车的商品列表。

如果没有一个统一的地方来管理这些数据，就会出现混乱。比如一个组件修改了用户的登录状态，但是其他组件并不知道，还以为用户没登录呢。Vuex 就像是商场的管理中心，它把这些需要共享的数据集中管理起来，这样各个组件都能从这里获取和修改数据，保证数据的一致性。

2. 安装 Vuex

首先，你得把 Vuex 这个“管理中心”安装到你的项目里。打开你的项目终端，输入下面的命令：

npm install vuex@4

这里的 @4 是因为 Vuex 4 版本是专门适配 Vue 3 的。安装完成后，Vuex 就被添加到你的项目依赖里了。

3. 创建 Vuex 的“管理中心”（store）

在你的项目 src 目录下，创建一个 store 文件夹，然后在这个文件夹里创建一个 index.js 文件，这个文件就是 Vuex 的核心配置文件，相当于商场管理中心的办公室。

// src/store/index.js
import { createStore } from 'vuex';

// 创建一个 store 实例
const store = createStore({
    // state 就像是管理中心的仓库，用来存放共享的数据
    state() {
        return {
            count: 0,  // 比如这里有一个计数器，初始值是 0
            user: {
                name: '',
                isLoggedIn: false
            }
        };
    },
    // mutations 就像是仓库的管理员，专门负责修改 state 里的数据
    mutations: {
        increment(state) {
            state.count++;  // 让计数器的值加 1
        },
        login(state, userData) {
            state.user.name = userData.name;
            state.user.isLoggedIn = true;
        }
    },
    // actions 就像是商场的调度员，它可以处理一些异步操作，然后再调用 mutations 来修改数据
    actions: {
        incrementAsync(context) {
            setTimeout(() => {
                context.commit('increment');  // 过 1 秒后调用 increment 这个 mutation
            }, 1000);
        },
        async loginAsync(context, userData) {
            // 模拟一个异步的登录请求
            const response = await fetch('/api/login', {
                method: 'POST',
                body: JSON.stringify(userData)
            });
            if (response.ok) {
                context.commit('login', userData);
            }
        }
    },
    // getters 就像是商场的查询台，组件可以通过它来获取 state 里的数据
    getters: {
        doubleCount(state) {
            return state.count * 2;  // 返回计数器值的两倍
        },
        isUserLoggedIn(state) {
            return state.user.isLoggedIn;  // 返回用户是否登录的状态
        }
    }
});

export default store;

4. 在主应用里启用 Vuex 的“管理中心”

打开项目的 main.js 文件，就像是给商场所有店铺通知管理中心的存在。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';  // 引入刚才创建的 store

const app = createApp(App);
app.use(store);  // 让应用使用这个 store
app.mount('#app');

5. 在组件里使用 Vuex 的数据和方法

现在，各个“店铺”（组件）就可以从管理中心获取数据和修改数据了。

<template>
    <div>
        <!-- 显示计数器的值 -->
        <p>计数器的值: {{ count }}</p>
        <!-- 显示计数器值的两倍 -->
        <p>计数器值的两倍: {{ doubleCount }}</p>
        <!-- 显示用户是否登录 -->
        <p>用户是否登录: {{ isUserLoggedIn }}</p>

        <!-- 点击按钮让计数器加 1 -->
        <button @click="increment">增加计数器</button>
        <!-- 点击按钮异步增加计数器 -->
        <button @click="incrementAsync">异步增加计数器</button>
        <!-- 点击按钮模拟用户登录 -->
        <button @click="login">用户登录</button>
    </div>
</template>

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

// 获取 store 实例
const store = useStore();

// 获取 state 里的计数器值
const count = store.state.count;
// 获取 getters 里的计数器值的两倍
const doubleCount = store.getters.doubleCount;
// 获取 getters 里的用户是否登录状态
const isUserLoggedIn = store.getters.isUserLoggedIn;

// 定义一个方法，调用 mutations 里的 increment 来增加计数器的值
const increment = () => {
    store.commit('increment');
};

// 定义一个方法，调用 actions 里的 incrementAsync 来异步增加计数器的值
const incrementAsync = () => {
    store.dispatch('incrementAsync');
};

// 定义一个方法，调用 actions 里的 loginAsync 来模拟用户登录
const login = () => {
    const userData = { name: '张三' };
    store.dispatch('loginAsync', userData);
};
</script>

通过以上步骤，你就可以在 Vue 3 项目里使用 Vuex 来管理共享数据了。组件可以方便地从 store 里获取数据，也可以通过 mutations 或 actions 来修改数据，保证了数据在整个应用里的一致性和可维护性。