使用pinia 和 下载 pinia 持久化插件

npm install pinia // 安装 

npm install pinia-plugin-persist// 持久化插件

在main.js 中设置全局引入

import {
    createApp
} from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import {
    createPinia
} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
import PcHeader from '/src/components/Pc/header.vue'
import PcFooter from '/src/components/Pc/footer.vue'

createApp(App).component('pc-header', PcHeader).component('pc-footer', PcFooter).use(store).use(router).mount('#app')

创建store文件 存放 pinia 数据

import {
    defineStore
} from "pinia";

export const useActiveStore = defineStore({
    id: "active",
    state: () => ({
        active: '/',
    }),
    getters: {
      
    },
    // 开启数据缓存 若 需要state 中的变量页面刷新数据缓存 需要调用 actions 中的方法
    actions: {
        setActive( active ){
            this.active = active
        },
    },
    persist: {
        enabled: true, // 开启数据缓存
    }
});

vue页面调用

import { ref, watch } from 'vue'
import { useRouter } from 'vue-router';
import { useActiveStore } from '/src/store/index.js' // 引用 pinia 数据 
const store = useActiveStore() // 定义 store 接收

// 修改 active 值  更改 tabs—item 样式
const getIndex = (t) => {
    store.setActive(t.code)// 调用 store actions 中方法 修改 变量值
    active.value = store.active
}