pinia的状态与vuex一样把数据存在内存中,在刷新页面后会清理内存,数据会丢失。
要解决这个问题非常简单,在状态改变时将其同步到浏览器的存储中,如 cookie、localStorage、sessionStorage 。
可以搭配 pinia-persistedstate-plugin 插件来实现持久化,原理也是把数据存入localStorage中,只是插件会帮助自动存入与取出,不需要自己去操作localstorage 。(我使用pinia-plugin-persistedstate或者pinia-plugin-persist都无效!)
pinia-persistedstate-plugin
接下来就使用 pinia-persistedstate-plugin 插件实现 pinia 状态的持久化。
- 安装依赖:
npm i pinia-persistedstate-plugin
- 引入该插件,在创建 pinia 实例时传入该插件
src/store/index.ts:
import { createPinia } from "pinia"
import { createPersistedState } from 'pinia-persistedstate-plugin'
const pinia = createPinia();
pinia.use(createPersistedState())
export default pinia
main.ts:
import { createApp } from 'vue'
import store from './store/index'
const app = createApp(App)
app.use(store)
app.mount('#app')
- 在需要持久化状态的模块中设置 persist。咱假设 demo 模块需要对状态需要持久化,defineStore 第一个参数定义唯一的模块名,第二个参数传递 setup,其实还有第三个参数,可开启 persist:
src/store/user.ts:
...
const useDemoStore = defineStore('useUser', () => {
state:()=>{
return {
isLogin:false,
num:0
}
}
}, {
persist: true //可以自定义配置存储的地方,这是默认储存
})
在需要使用store的页面修改数据的时候,不要使用赋值解构取出,而是直接取出并修改。
//demo.vue
import {useUser} from '@/store/user'
const userStore = useUser() //获取store
const fn = ()=>{
userStore.num++
}
插件帮助我们把数据存储到了localStorage
刷新浏览器后数据也不会重置为0了