pinia持久化和模块化

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>