Pinia 选项式存储与组合式存储：深度解析与选择指南-js教程-PHP中文网

Pinia 选项式存储与组合式存储：深度解析与选择指南

DDD

发布： 2025-09-15 10:22:01

原创

301人浏览过

Pinia 选项式存储与组合式存储：深度解析与选择指南

Pinia 提供两种核心方式来定义状态管理存储：选项式存储（Option Stores）和组合式存储（Setup Stores）。它们分别对应 Vue 的选项式 API 和组合式 API，在语法、灵活性和响应性控制上存在差异。本文将深入探讨这两种模式的特点、用法及其适用场景，帮助开发者根据项目需求和个人偏好做出明智选择，优化状态管理实践。

Pinia 存储定义方式概述

在 pinia 中，definestore 函数是创建存储的核心。它接受一个唯一的 id 作为第一个参数，第二个参数则可以是两种形式之一：一个配置对象（用于选项式存储）或一个函数（用于组合式存储）。这两种方式在幕后实现上并无本质差异，但它们提供了不同的开发体验和功能侧重。

选项式存储 (Option Stores)

选项式存储的设计理念与 Vue 的选项式 API 高度一致，通过一个包含 state、getters 和 actions 属性的对象来定义存储。这种方式对于习惯 Vue Options API 的开发者来说非常直观和易于上手。

核心特点

声明式：通过明确的属性名称（state, getters, actions）来组织代码，结构清晰。
易于理解：对于初学者或简单应用来说，其结构更易于阅读和维护。
自动绑定 this：在 actions 中，this 会自动指向当前存储实例。

示例代码

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter-option', {
  // state: 定义存储的响应式状态，必须是一个返回对象的函数
  state: () => ({
    count: 0,
    name: 'Eduardo',
  }),

  // getters: 定义基于状态的计算属性，接收 state 作为参数
  getters: {
    doubleCount: (state) => state.count * 2,
    // 也可以访问其他 getter，但需要使用 `this`
    // doubleCountPlusOne(): number {
    //   return this.doubleCount + 1;
    // }
  },

  // actions: 定义修改状态的方法，可以在其中执行异步操作
  actions: {
    increment() {
      this.count++; // 通过 this 访问 state
    },
    // 异步 action 示例
    // async incrementAsync() {
    //   await someApiCall();
    //   this.count++;
    // }
  },
});

登录后复制

注意事项

state 必须是一个函数，且返回一个对象，以确保在多个地方使用存储时状态的独立性。
在 getters 和 actions 中，可以使用 this 来访问 state 和其他 getters。

组合式存储 (Setup Stores)

组合式存储则借鉴了 Vue 3 的组合式 API，允许开发者使用 ref、reactive、computed 等函数来定义存储的状态、计算属性和方法。这种方式提供了更高的灵活性和更细粒度的控制。

核心特点

灵活性高：可以利用 Vue 组合式 API 的所有特性，如 watch、provide/inject 等，实现更复杂的逻辑。
细粒度控制：开发者可以更自由地组织和重用逻辑，尤其适用于大型或逻辑复杂的应用。
与 Vue 3 生态无缝集成：对于熟悉 Vue 3 组合式 API 的开发者来说，学习曲线更平缓。

示例代码

import { defineStore } from 'pinia';
import { ref, computed } from 'vue'; // 需要从 vue 中导入相关函数

export const useCounterStore = defineStore('counter-setup', () => {
  // state: 使用 ref 或 reactive 定义响应式状态
  const count = ref(0);
  const name = ref('Eduardo');

  // getters: 使用 computed 定义计算属性
  const doubleCount = computed(() => count.value * 2);

  // actions: 定义普通函数作为修改状态的方法
  function increment() {
    count.value++; // 通过 .value 访问 ref 的值
  }

  // 必须返回所有需要暴露给外部的状态、计算属性和方法
  return { count, name, doubleCount, increment };
});

登录后复制

注意事项

所有需要暴露给外部使用的状态（ref、reactive）、计算属性（computed）和方法都必须在 return 语句中返回。
访问 ref 定义的状态时，需要使用 .value。

关键差异与选择考量

理解两种存储方式的关键差异，有助于开发者根据具体场景做出最佳选择。

API 风格与开发习惯
- 选项式存储：与 Vue 的选项式 API 风格一致，适合习惯传统 Vue 开发模式或从 Vue 2 迁移的开发者。它提供了一种结构化的、声明式的定义方式。
- 组合式存储：与 Vue 的组合式 API 风格一致，适合熟悉 Vue 3 组合式 API、追求函数式编程和更高灵活性的开发者。它允许更自由地组织代码和逻辑。
灵活性与复杂逻辑处理
- 选项式存储：在处理简单到中等复杂度的状态管理时表现良好。其固定的结构使得代码易于预测和理解。
- 组合式存储：在处理复杂逻辑、需要高级响应性特性（如 watch、自定义 composables）或与其他 Composition API 功能深度集成时，展现出更大的优势。它允许开发者像在 Vue 组件的 setup 函数中一样自由地编写逻辑。
响应性控制

存了个图
视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情
- 选项式存储：Pinia 会自动处理 state 中定义的属性的响应性。开发者无需手动引入 ref 或 reactive。
- 组合式存储：开发者需要显式地使用 ref、reactive 来定义响应式状态，并通过 computed 来定义计算属性。这提供了更细粒度的响应性控制，但也要求开发者对 Vue 的响应性原理有更深入的理解。

何时选择

选择选项式存储：
- 当你的团队更熟悉 Vue 的选项式 API 时。
- 当你的应用状态管理逻辑相对简单，不需要复杂的组合式 API 特性时。
- 当你希望代码结构更加固定和声明式时。
选择组合式存储：
- 当你的团队熟悉并偏好 Vue 的组合式 API 时。
- 当你的应用状态管理逻辑非常复杂，需要高度的灵活性、细粒度控制和高级 Composition API 特性时。
- 当你希望将存储逻辑与 Vue 组件的 setup 逻辑保持一致的风格时。