在Vue3中使用Vuex

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 mit('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 mit('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 mit('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 来修改数据，保证了数据在整个应用里的一致性和可维护性。