vue.js - vuex 持久状态 : Storing class instances. 有什么最佳实践吗？

Question

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

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

Answer 1

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

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

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

假设你有一类用户

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

并且您的商店中有一组用户，并且它保存在您的本地存储中:

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

您现在可以利用 plugins in 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)
}