关于vue3中pinia的数据持久化

1.前言

在我们做项目或者是一些小demo的时候,时常会利用本地缓存进行数据的持久化处理,因此在vue3中的pinia状态管理存储库中正好存在这么一个插件pinia-plugin-persistedstate@1.6.1,那么让我们接下来进行使用该插件吧!

2.使用步骤(普通用法)

1.安装依赖包

yarn add pinia-plugin-persistedstate@1.6.1
# 或
npm i pinia-plugin-persistedstate

2.在项目的main.js或者main.ts中导入


import { createApp } from 'vue';
import App from '@/App.vue';

//导入依赖插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App);
const pinia = createPinia();
//pinia挂载该插件
pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.mount('#app');

3.在store模块中开启pinia数据持久化

mport { defineStore } from 'pinia';
import { http } from '@/utils/request';
//导入数据类型
import type { CategoryList } from '@/types/index';

const useHomeStore = defineStore('home', {
  //开启数据持久化,本地存储中key默认为'home'
  persist: true,
  state: () => {
    return {
      categoryList: [] as GoodsList,
    };
  },
  getters: {},
  actions: {
 
    //获取头部导航数据
    async getNewGoodsList() {
      const res = await http<CategoryList>('GET', '/home/category/head');

      this.categoryList = res.data.result;
    },
  },
});

export default useHomeStore;

4.本地存储中查看

3.进阶用法

由于在该模块开启数据持久化时,会把当前模块中所有的数据都进行储存,无法针对需求,进行特定的形式储存,因此该插件还支持进阶的使用方法

mport { defineStore } from 'pinia';
import { http } from '@/utils/request';
//导入数据类型
import type { CategoryList } from '@/types/index';

const useHomeStore = defineStore('home', {
  
  state: () => {
    return {
      categoryList: [] as GoodsList,
    };
  },
  getters: {},
  actions: {
 
    //获取头部导航数据
    async getNewGoodsList() {
      const res = await http<CategoryList>('GET', '/home/category/head');

      this.categoryList = res.data.result;
    },
  },
  //1.开启数据持久化,本地存储中key默认为'home',所有数据都持久化
  //persist: true,
  //2.持久化设置其他模式
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'home',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 按需持久化，默认不写会存储全部
    paths: ['categoryList'],
  },
});

export default useHomeStore;

4.关于vue2中是否能使用pinia和数据持久化插件?

1.可以使用,需要下载依赖@vue/composition-api让vue2的项目支持componentAPI模式

2.pinia可以在组合式api中运用

5.关于模块持久化后,数据更新是否会同步?

1.模块会读取本地储存的数据,如果当有请求更新数据,那么新数据覆盖旧的数据

2.不用额外处理,插件自动实现数据更新

vue3pinia的数据持久化