先行知识
文件结构
安装
在项目文件目录,运行
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>