сохраненное состояние vuex: хранение экземпляров класса. Какие-либо рекомендации?

#vue.js #vuex

#vue.js #vuex

Вопрос:

Оба vuex-persist или vuex-persistedstate сохранить состояние в localStorage с использованием JSON.stringify . Это означает, что все функции объекта удаляются. В случае, если объект является экземпляром класса, это означает, что экземпляр не может быть восстановлен автоматически. Имхо, это проблематично, поскольку состояние приложения часто состоит из экземпляров класса.

Я не уверен, как поступить. Мое состояние vuex состоит в основном из экземпляров класса. Какова наилучшая практика в отношении сохраняемого состояния?

Ответ №1:

Все пакеты, использующие хранилище браузера, ограничены в том, как работает хранилище. Хранилище сеанса или локальное хранилище состоит из значения пары ключ / значение

Чтобы решить подобную проблему, вам придется отменить сериализацию данных при инициализации приложения.

Довольно простой пример того, чего вы пытаетесь достичь:

Допустим, у вас есть класс 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)
}