【Vue3进阶】Pinia 中的 Store 组合式写法

Hey小伙伴们！今天来给大家分享一个 Vue3 状态管理库 Pinia 中非常实用的功能——Store 的组合式写法。通过这种写法，我们可以将多个 store 进行组合和复用，使得代码更加模块化、清晰易读。

如果你对 Vue3 和 Pinia 感兴趣，或者想学习如何更好地组织和管理应用的状态，那这篇笔记一定要收藏哦！🚀

👉 什么是 Pinia？

Pinia 是由 Vue.js 官方团队成员开发的新一代状态管理库，旨在替代 Vuex 成为 Vue3 的默认状态管理方案。相比 Vuex，Pinia 提供了更简洁的 API 和更强大的功能，使得状态管理变得更加直观和高效。

Pinia 支持模块化设计，允许我们将状态分散在多个 store 中进行管理。每个 store 都可以独立地定义自己的状态、getter、action 和 mutation，这使得代码更加清晰易读。

👉 为什么需要组合式写法？

在实际项目中，我们经常会遇到需要在多个组件或页面之间共享状态的情况。传统的状态管理方式可能会导致代码冗余、难以维护等问题。Pinia 提供了一种优雅的方式来解决这些问题——Store 的组合式写法。

通过组合式写法，我们可以将多个 store 进行组合和复用，避免重复定义相同的逻辑，提升代码的可维护性和可扩展性。

👉 案例场景：用户认证与购物车状态管理

我们来实现一个简单的案例：使用 Pinia 的组合式写法来管理用户认证和购物车的状态。我们将创建两个独立的 store（authStore 和 cartStore），并在组件中组合使用它们。

1. 安装依赖库

首先，确保你已经安装了 Vue3 和 Pinia：

npm install vue@next pinia

2. 创建 Pinia Store

接下来，我们创建两个独立的 store：authStore 和 cartStore。

authStore.js

// src/stores/authStore.js
import { defineStore } from 'pinia';export const useAuthStore = defineStore('auth', {state: () => ({username: 'Guest',isLoggedIn: false,}),actions: {login(username) {this.username = username;this.isLoggedIn = true;},logout() {this.username = 'Guest';this.isLoggedIn = false;}}
});

cartStore.js

// src/stores/cartStore.js
import { defineStore } from 'pinia';export const useCartStore = defineStore('cart', {state: () => ({items: [],total: 0,}),actions: {addItem(item) {this.items.push(item);this.total += item.price;},removeItem(index) {const item = this.items[index];this.total -= item.price;this.items.splice(index, 1);}}
});

3. 组合使用 Store

现在，我们可以在组件中同时使用这两个 store，并将它们组合在一起。为了简化操作，我们可以创建一个新的 store 来组合这两个 store。

combinedStore.js

// src/stores/combinedStore.js
import { useAuthStore } from './authStore';
import { useCartStore } from './cartStore';export const useCombinedStore = () => {const authStore = useAuthStore();const cartStore = useCartStore();return {authStore,cartStore,};
};

4. 在组件中使用组合 Store

接下来，我们在组件中使用这个组合后的 store，并调用其中的方法来测试效果。

<template><div><h1>用户认证与购物车</h1><!-- 用户信息 --><div><p>用户名: {{ combined.authStore.username }}</p><p>登录状态: {{ combined.authStore.isLoggedIn ? '已登录' : '未登录' }}</p><button @click="login">登录</button><button @click="logout">登出</button></div><!-- 购物车信息 --><div><h2>购物车</h2><ul><li v-for="(item, index) in combined.cartStore.items" :key="index">{{ item.name }} - {{ item.price }} 元<button @click="removeItem(index)">移除</button></li></ul><p>总计: {{ combined.cartStore.total }} 元</p><input v-model="newItem.name" placeholder="商品名称"><input v-model="newItem.price" type="number" placeholder="价格"><button @click="addItem">添加到购物车</button></div></div>
</template><script>
import { ref } from 'vue';
import { useCombinedStore } from '../stores/combinedStore';export default {setup() {const combined = useCombinedStore();const newItem = ref({name: '',price: 0,});const login = () => {combined.authStore.login('Alice');};const logout = () => {combined.authStore.logout();};const addItem = () => {combined.cartStore.addItem({ ...newItem.value });newItem.value.name = '';newItem.value.price = 0;};const removeItem = (index) => {combined.cartStore.removeItem(index);};return {combined,newItem,login,logout,addItem,removeItem,};}
};
</script>

5. 运行效果

当你点击“登录”按钮时，会看到用户的登录状态变为“已登录”，并且用户名显示为“Alice”。你可以通过输入商品名称和价格，并点击“添加到购物车”按钮将商品添加到购物车中。购物车中的商品列表会实时更新，并显示总计金额。

👉 关键点解析

Store 的组合式写法：
- 我们通过 useCombinedStore 函数将多个 store 组合在一起，这样可以在组件中方便地使用这些 store。
- 这种方式使得代码更加模块化，便于维护和扩展。
状态管理的优势：
- Pinia 提供了简洁的 API 和模块化的设计，使得状态管理变得更加直观和高效。
- 通过组合多个 store，我们可以避免重复定义相同的逻辑，提升代码的可维护性和可扩展性。
灵活的应用场景：
- 在实际项目中，我们可以根据需求创建多个独立的 store，并通过组合的方式在不同的组件中复用这些 store。
- 这种方式特别适合大型项目或多团队协作开发，能够有效提升开发效率和代码质量。

👉 更多扩展

异步操作：
- 在 store 中可以定义异步 action，例如发送网络请求获取数据。Pinia 支持 async/await 语法，使得异步操作更加简单明了。
持久化状态：
- 结合 localStorage 或 sessionStorage，可以在状态发生变化时将数据保存到本地存储中，以便在页面刷新后恢复状态。
插件支持：
- Pinia 提供了插件机制，可以通过插件扩展 store 的功能，例如添加日志记录、性能监控等。