Vue2中pinia刷新后数据丢失的问题解决

# yarn
yarn add pinia-plugin-persist
# npm
npm install pinia-plugin-persist

import { createPinia, PiniaVuePlugin } from 'pinia' //vue2需要引入PiniaVuePlugin 
import piniaPluginPersist from 'pinia-plugin-persist'//引入pinia数据持久化插件

Vue.use(PiniaVuePlugin)
const pinia = createPinia()//创建pinia的实例
pinia.use(piniaPluginPersist);

new Vue({
  router,
  render: h => h(App),
  pinia,
}).$mount('#app')

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useArticleIdsStore = defineStore('articleId', {
  // 其他配置...
  persist: {
    enabled: true,//开启数据持久化
    strategies: [
      {
        key: 'articleId',//给一个要保存的名称
        storage: localStorage,// localStorage 存储方式为本地存储
      }
    ]
  },
  state:()=>{
    //需要保存的数据，初始值为0
    return {articleId:0}
  },
  actions:{

  }
})

import { useArticleIdsStore } from '@/stores/articleId'
const articleIdsStore = useArticleIdsStore();

    methods: {
        getArticle() {
            //获取存储的articleId值
             const articleId = articleIdsStore.articleId;
            //其他操作...
        }, 
    },