Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
在上一章的例子了,我们一旦刷新页面计数器的值就会归零。很多时候有些数据我们是希望能长期保存在浏览器,这可以使用 pinia-plugin-persistedstate
插件实现。
$$tip
更多信息,查看 pinia-plugin-persistedstate 的 github 页面, https://github.com/prazdevs/pinia-plugin-persistedstate
$$
持久化
对上一章的例子做下修改,使其数据能持久化保存在浏览器。
安装
npm install pinia-plugin-persistedstate
应用插件
pinia-plugin-persistedstate 是 pinia 的一个插件,我们需要绑定到 pinia 上, 修改 pinia/index.ts
如下。
// pinia/index.ts
import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 绑定持久化插件
export default pinia
开启持久化
需要应用持久化的 store 加上 persist: true
的配置,修改 stores/counter.ts
如下。
// stores/counter.ts
import { ref, computed } from "vue"
import { defineStore } from "pinia"
export const useCounterStore = defineStore(
"counter",
() => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return {
count,
doubleCount,
increment,
}
},
{
persist: true, // 开启持久化
}
)