Pinia最基本用法

1. 定义 Store

首先，定义一个 Pinia Store，使用组合式 API 风格和 ref 来管理状态。

示例：stores/ids.js

import { defineStore } from 'pinia';
import { ref } from 'vue';export const useIdsStore = defineStore('ids', () => {const ids = ref([]); // 默认值是一个空数组const setIds = (val) => {ids.value = val; // 更新 ids 的值};return {ids,setIds,};
});

• ids 是一个响应式变量，默认值为 []。
• setIds 是一个方法，用于更新 ids 的值。

---

2. 在第一个页面修改值

在第一个页面中，调用 setIds 方法来更新 ids 的值。

示例：第一个页面（PageA.vue）

<template><div><h1>页面 A</h1><button @click="assignValue">设置 IDs</button><router-link to="/page-b">跳转到页面 B</router-link></div>
</template><script setup>
import { useIdsStore } from '@/stores/ids.js';const idsStore = useIdsStore();// 设置 ids 的值
function assignValue() {const newIds = [1, 2, 3]; // 假设这是要赋的值idsStore.setIds(newIds); // 调用 setIds 方法赋值console.log('IDs 已设置:', idsStore.ids); // 打印确认
}
</script>

• 点击按钮后，调用 setIds 方法将 [1, 2, 3] 赋值给 ids。
• 可以通过 console.log 确认赋值是否成功。

---

3. 在第二个页面获取最新值

在第二个页面中，使用 storeToRefs 提取响应式状态，并显示最新的 ids 值。

示例：第二个页面（PageB.vue）

<template><div><h1>页面 B</h1><p>从页面 A 获取的 IDs: {{ ids }}</p></div>
</template><script setup>
import { storeToRefs } from 'pinia';
import { useIdsStore } from '@/stores/ids.js';const idsStore = useIdsStore();
const { ids } = storeToRefs(idsStore); // 提取响应式状态// 如果需要调试，可以打印 ids 的值
console.log('当前 IDs:', ids.value);
</script>

• 使用 storeToRefs 提取 ids，确保它是响应式的。
• 在模板中直接使用 {{ ids }}，Vue 会自动解包 ref，无需手动写 .value。

---

4. 关键点解析

(1) 全局状态共享

Pinia 的状态是全局共享的。无论你在哪个页面或组件中访问同一个 Store，都会获取到相同的状态。

(2) 数据持久性

默认情况下，Pinia 的状态是存储在内存中的。如果你刷新页面，状态会重置为初始值（即 []）。如果需要跨页面刷新保留状态，可以启用持久化插件。

启用持久化插件

安装插件：

npm install pinia-plugin-persistedstate

配置持久化：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

在 Store 中启用持久化：

import { defineStore } from 'pinia';
import { ref } from 'vue';export const useIdsStore = defineStore('ids', () => {const ids = ref([]);const setIds = (val) => {ids.value = val;};return {ids,setIds,};
}, {persist: true, // 启用持久化
});

这样，即使页面刷新，ids 的值也不会丢失。