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

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

article 2025/1/20 14:33:26

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 的功能，例如添加日志记录、性能监控等。