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

Pinia最基本用法

news 来源：原创 2025/5/18 8:51:01

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 的值也不会丢失。