时间戳

首页 > 解决方案 > vuex 持久化状态：存储类实例。有什么最佳实践吗？

vue.js - vuex 持久化状态：存储类实例。有什么最佳实践吗？

问题描述

两者vuex-persist或vuex-persistedstate使用 将状态存储在 localStorage 中JSON.stringify。这意味着一个对象的所有功能都被剥离了。如果对象是类实例，这意味着该实例无法自动恢复。恕我直言，这是有问题的，因为应用程序状态通常由类实例组成。

我不确定如何进行。我的 vuex 状态主要由类实例组成。关于持久状态的最佳实践是什么？

标签： vue.jsvuex

解决方案

所有使用浏览器存储的包都受限于存储的工作方式。会话存储或本地存储由键/值对值组成

要解决这样的问题，您必须在应用程序初始化时反序列化数据。

您要实现的目标的一个相当简单的示例：

假设您有一个 User 类

class User {
  constructor(name) {
    this.name = name;
  }
 
  greetings() {
    console.log(`Hello ${this.name}`)
  }
}

并且您的商店中有一组用户，并将其持久化到您的本地存储中：

const state = {
  users: [User, User, User]
}

您现在可以利用Vuex中的插件：

const userSerializer = (store) => {
   const serializedUsers = store.users.map(u => new User(u.name));

   // you would have to define this mutation
   store.commit('setUsers', serializedUsers)
}

推荐阅读