【vue】Pinia-3 持久化存储

先行知识

【vue】Pinia-2 安装Pinia，使用store

文件结构

安装

在项目文件目录，运行

npm i pinia-plugin-persistedstate

在package.json中可看到

特点

比localStorage易用

使用流程

在main.js中添加如下内容（先添加pania）

//从pinia-plugin-persistedstate模块中导入piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
//注册piniaPluginPersistedstate插件
pinia.use(piniaPluginPersistedstate)

如图

在自己创建的仓库中（我这里是web.js）添加如下内容

{
    //在仓库添加持久化
    persist: true
}

如图

程序

main.js

import { createApp } from 'vue'

import { createPinia } from 'pinia'

//从pinia-plugin-persistedstate模块中导入piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()

//注册piniaPluginPersistedstate插件
pinia.use(piniaPluginPersistedstate)


const app = createApp(App)
app.use(pinia)
app.mount('#app')

web.js

import { reactive,ref } from "vue";
import { defineStore } from "pinia";



//命名规范：前面加use，后面加Store
export const useWebStore = defineStore("web", ()=>{
    const web = reactive({
        title: "abcdfg",
        url: "https://www.abcdfg.com",
    })

    const users = ref(1000)
    
    const userAdd=()=>{
        users.value+=1
    }

    return {
        web,
        users,
        userAdd
    }
},
{
    //在仓库添加持久化
    persist: true
}
);

App.vue

<template>
  <p>{{ webStore.web.title }} </p>
  <p>{{ webStore.web.url }} </p>
  <p>{{ webStore.users }} </p>


  <button @click="webStore.userAdd()">Add User</button>

</template>

<script setup>
import { reactive, ref, toRef, toRefs } from 'vue';
import { useWebStore } from './stores/web';


const webStore = useWebStore()

console.log(webStore.web)
console.log(webStore.users)

</script>

<style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX