pinia组合式 持久化
时间: 2023-10-25 22:32:47 浏览: 86
在Pinia中,可以通过使用 pinia-plugin-persistedstate 插件来实现数据持久化。首先,你需要安装 pinia-plugin-persistedstate 依赖包,可以使用 npm install pinia-plugin-persistedstate --save 命令进行安装。然后,在你的 main.js 文件中引入 createPinia 和 piniaPluginPersistedstate,并创建一个 pinia 实例并使用插件 pinia.use(piniaPluginPersistedstate)。示例如下:
```javascript
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);
```
接下来,你可以创建一个 user.js 文件,并在其中定义一个名为 useCounterStore 的 store。在这个 store 中,你可以定义 state、actions 和 persist 配置。persist 配置用于指定需要持久化的数据字段,以及持久化的方式和缓存的键名。示例如下:
```javascript
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('user', {
state: () => ({
counter: 0,
name: "zero",
msg: 'msg呀呀呀'
}),
actions: {
increment() {
this.counter++
}
},
persist: {
key: 'storekey', // 缓存键名
storage: window.sessionStorage, // 缓存方式
paths: ['counter'], // 需要持久化的数据字段,这里只持久化 counter 字段
},
});
```
最后,在你的组件中使用 useCounterStore 来获取该 store 的实例,并调用其中的方法或修改其中的数据。示例如下:
```javascript
import { useCounterStore } from '../store/user';
const counterStore = useCounterStore();
counterStore.increment(); // 调用 actions 中的方法
counterStore.$patch({ name: counterStore.counter, 'okk' }); // 修改 counterStore 的数据
```
这样,你就可以实现 Pinia 组合式数据的持久化功能了。Store 是一个独立存在的,它保存状态和业务逻辑,不会绑定到组件树。它类似于一个全局状态的主人,包含 state、getters 和 actions 三个概念,相当于组件中的 data、computed 和 methods。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>