Pinia持久化插件-persist安装及使用

Pinia持久化插件-persist安装及使用

---

Pinia持久化插件-persist
Pinia默认是内存存储，当刷新浏览器时会丢失数据。为了解决这个问题，我们可以使用Persist插件将Pinia中的数据持久化存储。

---

1.步骤 安装插件

npm install pinia-persistedstate-plugin

2.步骤在 Pinia 中使用插件

首先导入Pinia的createPersistedState函数，然后创建了一个持久化状态使用的Pinia插件，并将其应用到Pinia实例中。

main.js代码如下：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-persistedstate-plugin';  

const pinia = createPinia();
const persist = createPersistedState();
pinia.use(persist);

const app = createApp(App);
app.use(pinia);
app.mount('#app');

3.步骤 在 Pinia Store 中使用状态

定义了一个名为token的Pinia store，并在创建store时将persist选项设置为true，表示需要持久化存储该store的状态。这样，在使用Pinia插件的情况下，当刷新浏览器时，token的值将会被持久化存储下来，不会丢失。

token.js代码如下：

//定义store
import { defineStore } from 'pinia'
import { ref } from 'vue'
/* 
    第一个参数:名字,唯一性
    第二个参数:函数,函数的内部可以定义状态的所有内容

    返回值: 函数
*/
export const useTokenStore = defineStore('token', () => {
    //定义状态的内容

    //1.响应式变量
    const token = ref('')

    //2.定义一个函数,修改token的值
    const setToken = (newToken) => {
        token.value = newToken
    }

    //3.函数,移除token的值
    const removeToken = () => {
        token.value = ''
    }

    return {
        token, setToken, removeToken
    }
}, {
    persist: true//持久化存储
});

---