实现vuex数据持久化处理

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

前言： 

方案一

localStorage

介绍 

值 

示例

JSON.stringify() 

介绍 

语法 

参数

返回值

使用JSON.stringify() 结合localStorage的例子

具体步骤

1.封装storage 存储模块

2.创建user.jx文件，将数据存入vuex的同时也存入本地

方案二

安装插件

使用方法

vuex中module数据的持久化存储

注意事项：

---

前言： 

这两天在做vue项目存储个人信息的时候，遇到了页面刷新后个人信息数据丢失的问题，在查阅资料后，我得出两种解决数据丢失，使数据持久化的方法

方案一：

封装 storage 存储模块，利用本地存储，进行 vuex 持久化处理

方案二：

安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化

方案一

在封装储存模块之前，我们有必要先复习一下localStorage和JSON.stringify() 的知识

localStorage

介绍 

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

值 

一个可被用于访问当前源（origin）的本地存储空间的 Storage 对象。

示例

下面的代码片段访问了当前域名下的本地 Storage 对象，并通过 Storage.setItem() 增加了一个数据项目。

localStorage.setItem("myCat", "Tom");

 该语法用于读取 localStorage 项，如下：

let cat = localStorage.getItem("myCat");

该语法用于移除 localStorage 项，如下：

localStorage.removeItem("myCat");

该语法用于移除所有的 localStorage 项，如下： 

// 移除所有
localStorage.clear();

JSON.stringify() 

介绍 

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: '{"x":5,"y":6}'

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// Expected output: '[3,"false",false]'

console.log(JSON.stringify({ x: [10, undefined, function () {}, Symbol('')] }));
// Expected output: '{"x":[10,null,null,null]}'

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// Expected output: '"2006-01-02T15:04:05.000Z"'

语法 

JSON.stringify(value[, replacer [, space]])

参数

value

将要序列化成 一个 JSON 字符串的值。

replacer （可选）

如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

space （可选）

指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

返回值

一个表示给定值的 JSON 字符串

使用JSON.stringify() 结合localStorage的例子

一些时候，你想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板：

// 创建一个示例数据
var session = {
  screens: [],
  state: true,
};
session.screens.push({ name: "screenA", width: 450, height: 250 });
session.screens.push({ name: "screenB", width: 650, height: 350 });
session.screens.push({ name: "screenC", width: 750, height: 120 });
session.screens.push({ name: "screenD", width: 250, height: 60 });
session.screens.push({ name: "screenE", width: 390, height: 120 });
session.screens.push({ name: "screenF", width: 1240, height: 650 });

// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem("session", JSON.stringify(session));

// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem("session"));

// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

具体步骤

1.封装storage 存储模块

// 约定一个通用的键名
const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
  const defaultObj = { token: '', userId: '' }
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : defaultObj
}

// 设置个人信息
export const setInfo = (obj) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}

// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

2.创建user.jx文件，将数据存入vuex的同时也存入本地

import { getInfo, setInfo } from '@/utils/storage'
export default {
  namespaced: true,
  state () {
    return {
      // 个人权证相关
      userInfo: getInfo()

    }
  },
  mutations: {
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {},
  getters: {}
}

方案二

安装插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

使用方法

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
  /* vuex数据持久化配置 */
	plugins: [
		createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
			storage: window.sessionStorage,
      // 存储的 key 的key值
			key: "store",
			render(state) {
        // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
				return { ...state };
			}
		})
	]
});

export default store;

vuex中module数据的持久化存储

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}
 
/* store.js */
import { dataStore } from './module'
 
const dataState = createPersistedState({
  paths: ['data']
});
 
export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
});

注意事项：

• storage为存储方式，可选值为localStorage、sessionStorage和cookies；
• localStorage和sessionStorage两种存储方式可以采用上述代码中的写法，若想采用cookies坐位数据存储方式，则需要另外一种写法；
• render接收一个函数，返回值为一个对象；返回的对象中的键值对既是要持久化存储的数据；
• 若想持久化存储部分数据，请在return的对象中采用key：value键值对的方式进行数据存储，render函数中的参数既为state对象。