Pinia存储和读取数据

1. Pinia 的核心概念：Store

Pinia 的核心是 Store，它是一个存储数据的地方，类似于 Vuex 中的 Store。Store 的设计思想是将数据按照功能模块进行分类存储，方便管理和使用。

分类存储：根据应用的功能模块划分 Store，例如 count 模块存储与计数相关的数据，loveTalk 模块存储与情话相关的数据。

文件命名：通常以功能模块命名 Store 文件，例如 count.ts、loveTalk.ts，方便理解文件内容。

2. 创建 Store

创建 Store 的步骤如下：

步骤 1：引入 defineStore

在 Store 文件中（如 count.ts），引入 defineStore：

import { defineStore } from 'pinia';

步骤 2：定义 Store

使用 defineStore 定义 Store，传入两个参数：

1. Store 的 ID（名称）：通常与文件名一致，例如 count。

2. 配置对象：包含 state、getters 和 actions 等配置项。

例如：

export const useCountStore = defineStore('count', {
  state: () => {
    return {
      sum: 6 // 初始值为 6
    };
  }
});

state 必须是一个函数，返回一个对象。这是 Pinia 的要求，与 Vuex 的写法不同。

state负责存储数据，是应用状态的核心。

getters负责派生状态，用于计算基于 state 的新值。

actions负责处理逻辑，用于修改 state 或执行异步操作。

3. 使用 Store

在组件中使用 Store 的步骤如下：

步骤 1：引入 Store

在组件文件中引入定义好的 Store：

import { useCountStore } from '@/stores/count';

步骤 2：调用 Store

通过调用 Store 的函数来获取实例：

const countStore = useCountStore();

步骤 3：读取数据

直接通过 countStore 访问 state 中的数据：

console.log(countStore.sum); // 直接访问，无需 `.value`

• 注意：如果 state 中的数据是通过 ref 定义的，Pinia 会自动解包，因此不需要 .value。

4. 数据存储与读取的示例

示例 1：count 模块

• Store 文件（count.ts）：

  
  

import { defineStore } from 'pinia';

export const useCountStore = defineStore('count', {
  state: () => ({
    sum: 6 // 存储求和的结果
  })
});

• 组件中使用：

  
  

<template>
  <div>
    <p>当前和：{{ countStore.sum }}</p>
    <button @click="countStore.sum += 1">加一</button>
  </div>
</template>

<script setup>
import { useCountStore } from '@/stores/count';
const countStore = useCountStore();
</script>

示例 2：loveTalk 模块

• Store 文件（loveTalk.ts）：

  
  

import { defineStore } from 'pinia';

export const useLoveTalkStore = defineStore('loveTalk', {
  state: () => ({
    talkList: [
      { id: 1, content: '我爱你' },
      { id: 2, content: '我也爱你' }
    ]
  })
});

• 组件中使用：

  
  

<template>
  <div>
    <ul>
      <li v-for="item in loveTalkStore.talkList" :key="item.id">{{ item.content }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useLoveTalkStore } from '@/stores/loveTalk';
const loveTalkStore = useLoveTalkStore();
</script>

5. 开发者工具中的 Pinia

在开发者工具中，可以通过 Pinia 的面板查看和调试 Store 中的数据：

• Store 的结构：可以看到每个 Store 的 state、getters 和 actions。

• 数据变化：当数据更新时，开发者工具中的数据也会实时更新。

6. 注意事项

1. 命名规范：Store 的 ID 和文件名尽量保持一致，便于管理和查找。

2. 数据访问：Pinia 会自动解包 ref，因此访问 state 中的数据时不需要 .value。

3. 动态加载：只有在组件中通过 useStore 调用了 Store，该 Store 才会出现在开发者工具中。

7. 总结

通过 Pinia 的 Store，可以方便地将数据存储在全局状态中，并在组件中按需读取和修改。Pinia 的设计思想是将数据分类存储，每个 Store 独立管理，便于维护和扩展。像一个系统中用户的个人信息有时候就需要通过Store来进行存储