Pinia：官網

Pinia 是一個?Vue.js?狀態管理庫，如果你在組件中修改了 store 中的數據并刷新了界面，Pinia 會將 store 中的數據重置為初始值，從而導致數據丟失的問題。

這里給出vue2的解決方案：

可以使用 Pinia 的?Persist?插件，該插件可以將 Pinia 的 store 數據持久化到本地存儲中，這樣當你刷新頁面時，store 中的數據不會丟失。可以參考文檔：文檔

安裝Persist?，選擇你喜歡的包管理器

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

main.js文件

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')

?articeId.js，這里我是保存文章Id，所以是這個文件，根據官方文檔，在src/stores下創建該文件

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:()=>{//需要保存的數據，初始值為0return {articleId:0}},actions:{}
})

使用樣例：

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

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