Pinia - 基本使用、持久化存储插件

目前最新的Pinia版本是3.x
持久化的理解：将Pinia管理的数据，使用localStorage或sessionStorage管理，专门有相关的插件可实现
3版本的Pinia持久化处理，需要搭配的插件是：pinia-plugin-persistedstate
注意：不要使用pinia-plugin-persist这个插件，插件太老，在pinia3.0版本环境下，安装会报错（不匹配，给出了此插件匹配pinia2.0版本提示）

测试过可以运行的版本如下：
"pinia": "^3.0.1",
"pinia-plugin-persistedstate": "^4.2.0",

pinia-plugin-persistedstate文档：https://www.npmjs.com/package/pinia-plugin-persistedstate
安装：npm i pinia-plugin-persistedstate

【main.js】
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

【src/stores/pagetags.js】
import { defineStore } from "pinia";
import { ref } from "vue";

export const pagetagsStore = defineStore(
  "pagetags",
  () => {
    let tags = ref([]);
    function increment(item) {
      tags.value.push(item);
    }
    function deleteItem(i) {
      tags.value.splice(i, 1);
    }
    return { tags, increment, deleteItem };
  },
  {
    persist: {
      storage: sessionStorage,//指定存储方式
      key: "pagetags",//存储的名字，将来sessionStorage.getItem('pagetags')这样可获取
      pick: ["tags"],//指定哪些内容要存储
    },
  }
);

【Pinia在页面中的使用】
import { pagetagsStore } from "@/stores/pagetags";
import { storeToRefs } from 'pinia';

const pagetags = pagetagsStore();
const { tags } = storeToRefs(pagetags);//解构后保证tags还是响应式的

方法直接调用
pagetags.increment({
  menuName: submenu.menuDataName,
  url: submenu.url
});