Pinia 中的选项式与组合式写法

Pinia 中的选项式与组合式写法

在 Pinia 中，你可以使用两种主要的方式来定义 Store：选项式写法 和 组合式写法。这两种写法各有优缺点，选择哪种取决于你的个人偏好和项目需求。

1. 选项式写法（Options API）

选项式写法是 Pinia 默认的写法，类似于 Vue 2 中的选项式 API。它通过一个对象来定义 Store 的结构，包括 state、getters 和 actions。

示例代码：

// stores/talk.js
import { defineStore } from 'pinia';

export const useTalkStore = defineStore('talk', {
  state: () => ({
    talkList: [
      { id: 1, content: '我爱你' },
      { id: 2, content: '我也爱你' }
    ]
  }),
  actions: {
    getTalk() {
      // 模拟从 API 获取数据
      this.talkList.push({ id: Date.now(), content: '新的情话' });
    }
  }
});

优点：

1. 结构清晰：所有状态、派生状态和动作都集中在一个对象中，易于理解和管理。

2. 适合初学者：如果你熟悉 Vue 2 的选项式 API，这种写法会很容易上手。

缺点：

1. 灵活性较低：所有逻辑都写在一个对象中，可能会导致代码冗长，尤其是在大型项目中。

2. 难以复用：逻辑分散在 state 和 actions 中，难以提取和复用。

2. 组合式写法（Composition API）

组合式写法是 Vue 3 引入的一种新写法，它允许你通过函数组合的方式来定义 Store。这种方式更加灵活，适合复杂逻辑的拆分和复用。

示例代码：

// stores/talk.js
import { defineStore, reactive } from 'pinia';

export const useTalkStore = defineStore('talk', () => {
  // 定义响应式状态
  const talkList = reactive([
    { id: 1, content: '我爱你' },
    { id: 2, content: '我也爱你' }
  ]);

  // 定义动作
  function getTalk() {
    // 模拟从 API 获取数据
    talkList.push({ id: Date.now(), content: '新的情话' });
  }

  // 返回状态和动作
  return { talkList, getTalk };
});

数据直接用reactive来定义

优点：

1. 灵活性高：可以自由组合逻辑，适合复杂项目的拆分和复用。

2. 代码清晰：逻辑和状态分开定义，代码更加清晰。

3. 与 Vue 3 的 Composition API 一致：如果你熟悉 Vue 3 的 Composition API，这种写法会更加自然。

缺点：

1. 需要返回值：必须在函数中返回所有需要暴露的状态和动作。

2. 学习曲线稍高：对于初学者来说，可能需要一些时间来适应这种写法。

3. 使用组合式写法的注意事项

在组合式写法中，你需要手动返回所有需要暴露的状态和动作。如果忘记返回，这些状态或动作将无法在组件中使用。

4. 组件中的使用

无论使用哪种写法，组件中的使用方式都是一样的：

<template>
  <div>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li>
    </ul>
    <button @click="talkStore.getTalk">获取新情话</button>
  </div>
</template>

<script setup>
import { useTalkStore } from '@/stores/talk';

const talkStore = useTalkStore();
</script>

5. 总结

• 选项式写法：结构清晰，适合初学者，但灵活性较低。

• 组合式写法：灵活性高，适合复杂项目，但需要手动返回状态和动作。

选择哪种写法取决于你的个人偏好和项目需求。如果你更喜欢清晰的结构，可以选择选项式写法；如果你需要更高的灵活性和复用性，可以选择组合式写法。