Question

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

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

Answer 1

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

要解决此类问题，必须在应用程序初始化时对数据进行反序列化。

一个非常简单的示例，说明您要实现的目标：

假设您有一类User

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)
}

vuex保持状态：存储类实例。有最佳做法吗？

1 个答案: