vuejs3 pinia持久化存储

pinia地址：

插件地址：

先安装pinia

javascript 复制代码

npm install pinia

再安装插件

安装pinia后，再安装这个插件

javascript 复制代码

npm i pinia-plugin-persistedstate

全局中引入持久化插件

在src目录下的main.ts或者main.js里

javascript 复制代码

//main.ts或者main.js里

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

//注意下面没有{}
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()             //创建pinia
pinia.use(piniaPluginPersistedstate)    //把pinia插件，注册到pinia中
app.use(pinia)
app.mount('#app')

持久化插件配置：

stores目录下的userStore.js （根据实际使用选择）

所有数据持久化配置。

javascript 复制代码

import {ref, computed, reactive} from 'vue'
import {defineStore} from 'pinia'  //只引入pinia就可以了

export const useUserStore = defineStore('user', () => {
        const userInfo = reactive({})
        return {userInfo}
    }, 
    //这里是第三个参数
    {
        persist: true  //加上这一个，所有的数据都可以持久化
    }
)

指定数据持久化配置。

javascript 复制代码

import {ref, computed, reactive} from 'vue'
import {defineStore} from 'pinia'  //只引入pinia就可以了

export const useUserStore = defineStore('user', () => {
        const userInfo = reactive({})
        return {userInfo}
    }, 
    //这里是第三个参数
    {
         persist: {
            paths: ['name', 'info.des'] //指定 name, info.des持久化
         },
    }
)

使用插件：

赋值，持久化的数据

javascript 复制代码

<script setup>
//引入配置好的store
import {useUserStore} from "@/stores/userStore.js"
//实例化store
const userStore = useUserStore()




//...一堆逻辑后面赋值且自动持久化，使用的是'所有数据持久化配置'
 userStore.$patch({
    userInfo:res2.data
})
</script>

调用，持久化的数据

javascript 复制代码

<script setup>
//引入配置好的store
import {useUserStore} from "../stores/userStore.js";
//实例化store
const userStore = useUserStore()
</script>


<template>
<!--template中调用store内的信息-->
  <div>
    {{ userStore.userInfo }}
  </div>
</template>

清空，持久化的数据

javascript 复制代码

<script setup>
//引入配置好的store
import {useUserStore} from "@/stores/userStore.js"
//实例化store
const userStore = useUserStore()


//清空持久化数据userInfo
  userStore.$patch({
    userInfo:{}
  })

//下面这种写法，虽然可以清空，但是无法再次赋值，强制不推荐使用
//userStore.userInfo = {}
</script>