使用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: {
},
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'
const store = useActiveStore()
const getIndex = (t) => {
store.setActive(t.code)
active.value = store.active
}