欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex-along解决vuex中存储的数据在页面刷新之后失去的问题

程序员文章站 2024-02-28 11:53:58
...

一. 发现问题

在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题。其实这个问题困扰我很久了????,以前就只会傻傻地使用localStorage来解决。今天偶然看到公司的大佬在项目中使用了vuex-along插件(之前没见过),于是请教了一番,然后自己在网上也搜了搜这个插件,感觉发现了新大陆????。学吧,学无止境????

二. 解决问题

一般都会采用cookie、sessionStorage或localStorage等方法(但这些方式只适用于数据量较少的情况), 而在正真的开发中,封装好的vuex-along 可能更实用(推荐)

安装
npm install vuex-along --save
yarn add vuex-along

基本使用:
vuex-along解决vuex中存储的数据在页面刷新之后失去的问题到此为止,插件已经生效了,默认会存储所有 state 到 localStorage

接下来说说更详细的用法:

传入需要的参数来满足使用需求

import Vue from 'vue';
import Vuex from 'vuex';
import createVuexAlong from "vuex-along";

const moduleA = {
  state: {
    a1: "hello",
  }
};

const store = new Vuex.Store({
  state: {
    count: nll
     token:''",
  },
  mutations: {
    set_count: (state, payload) => {
      state.count= payload
    },
    set_token: (state, payload) => {
      state.token = payload
    },
  plugins: [
    createVuexAlong({
      name: "hello-vuex-along", // 设置保存的集合名字,避免同站点下的多项目数据冲突
      local: {
        list: ["ma"],
        isFilter: true // 过滤模块 ma 数据, 将其他的存入 localStorage
      },
      session: {
        list: ["count", "ma.a1"] // 保存 count 和模块 ma 中的 a1 到 sessionStorage
      }
      //如果对于sessionstorage不进行任何操作,也可将session设为false
    })
  ]
});

参数:

VuexAlongOptions

字段 必选 类型 描述
name String 设置本地数据集合的名字,默认为 vuex-along
local Object localStorage 的配置,见 #WatchOptions
session Object sessionStorage 的配置,见 #WatchOptions
justSession Boolean 仅使用 sessionStorage

WatchOptions

字段 必选 类型 描述
list String [] 需要监听的属性名或模块名的字符串列表
isFilter Boolean 过滤 list 中的字段而非保存

数据清理:

window.clearVuexAlong(local = true, session = true):void;
clearVuexAlong() // localStorage 和 sessionStorage 都会被清理
clearVuexAlong(true,false) // 只清理 localStorage
clearVuexAlong(false,true) // 只清理 sessionStorage
相关标签: vuex vue