pinia的作用是什么
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({})
. 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。
问题是什么
当我们的跨组件/页面实现通信的时候,每次刷新浏览器都会发现存储在pinia中数据消失了,因为数据是存储在内存中的原因
解决办法是什么
1.安装持久化存储插件 : npm install pinia-plugin-persist
2.在main.js中添加如下代码
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App).use(pinia)
3.在我们的store中添加如下代码:
import { defineStore } from 'pinia';
export const useStore=defineStore('main',{
state:()=>{
return{
num:10,
city:"",
title:"",
}
},
// 相当于计算属性,利用defineStore()中的getters属性定义,他们接收状态作为第一个参数一鼓励箭头函数使用
getters:{
cityVal:(state)=>state.num*2,
},
// 相当于组件中的methods,他们可以使用defineStore()中的actions属性定义,并且它们非常适合定义业务逻辑
actions:{
cityVals(query){
return this.city=query;
}
},
persist:{
enabled:true
}
})
export default useStore;
添加这个属性即可实现持久化存储
persist:{
enabled:true
}