Pinia内存常驻

之前一期中讲过Pinia【在Vue 3中使用Pinia:简洁高效的状态管理】,新的状态管理更加高效，今天来讲一讲如何让 Pinia 数据常驻。

1、下载包 pinia-plugin-persistedstate

// npm
npm install pinia-plugin-persistedstate
// yarn
yarn add pinia-plugin-persistedstate

2、创建文件 /store/index.js

这里把插件pinia-plugin-persistedstate， use到 pinia 内部后， 就可以在建立 store 时使用内存常驻了

/**pinia */
import { createPinia } from 'pinia';
/**内存常驻 */
import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
/**创建 */
const pinia = createPinia();
/**use */
pinia.use(piniaPluginPersistedState)

export default pinia

3、在 store 中使用

这里使用了 persist: true ，代表将此 store 中的所有 数据全部常驻在浏览器中

import { defineStore } from 'pinia'

const useLoginStore = defineStore("login", {
    persist: true, // 持久保存
    state: (): InitStateType => ({
        isLogin: false,
        isShow: false,
        token: "",
        userInfo: {}
    }),
    actions: {
        // 设置token
        setToken (token: string) {
            this.token = token
        },
    }
})

export default useLoginStore;

下面介绍将 单个 数据常驻在浏览器中

import { defineStore } from 'pinia'

const useLoginStore = defineStore("login", {
    persist: {
        paths: ["token"] // 只将 token 常驻在浏览器中
    },
    state: (): InitStateType => ({
        isLogin: false,
        isShow: false,
        token: "",
        userInfo: {}
    }),
    actions: {
        // 设置token
        setToken (token: string) {
            this.token = token
        },
    }
})

export default useLoginStore;

这种内存常驻的好出就是拿取数据规范，不用在 cookie 或者 localstorage 中储存与取用。