pinia持久化
yarn add pinia
yarn add pinia-plugin-persistedstate
"pinia": "^2.0.28" "pinia-plugin-persistedstate": "^3.0.1",
/src/store/pinia.js
import {
createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/dark/css-vars.css'
import pinia from '@/store/pinia'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.use(router)
//*
app.use(pinia)
app.mount('#app')
/src/store/modules/demo.js
import {
defineStore } from 'pinia'
import {
ref } from 'vue'
const useDemoStore = defineStore('demo',
() => {
const demo = ref(0)
const increment = () => {
demo.value++
}
return {
demo,
increment
}
},
//重点在这里
{
persist: true
}
)
export default useDemoStore
Index.vue
<template>
{
{ number }}
<el-button @click="add" type="primary">add</el-button>
</template>
<script setup>
import useNumberStore from '@/store/modules/useNumberStore'
import {
storeToRefs } from 'pinia'
const numberStore = useNumberStore()
const {
number } = storeToRefs(numberStore)
const add = () => {
numberStore.increment()
}
</script>
当刷新页面后,值也不会清零
pinia模块化
基于以上pinia持久化
进行的模块化
/src/store/index.js
将modules中的stroe全部导入
import useDemoStore from './modules/demo';
import useNumberStore from './modules/useNumberStore';
const useStore = () => ({
useDemoStore: useDemoStore(),
useNumberStore: useNumberStore(),
})
export default useStore;
Index.vue
<template>
{
{ number }}
<el-button @click="add" type="primary">add</el-button>
</template>
<script setup>
//只需要引入index的useStore
import useStore from '@/store/index'
import {
storeToRefs } from 'pinia'
const store = useStore()
const {
useNumberStore } = store;
const {
number, increment } = storeToRefs(useNumberStore)
const add = () => {
useNumberStore.increment()
}
</script>