Состояние Vuex Изменение значения карты не распространяется [дублировать]

Vue.js не поддерживает реактивность по типам данных Map и Set (пока?).

Билет функции имеет некоторое обсуждение и эта работа вокруг ( пользователем «inca»):

Наборы и карты не наблюдаются Vue. Чтобы использовать их - либо в v-for, либо в вычисленных свойствах, методах, наблюдателях, выражениях шаблонов и т. Д. - вам нужно создать сериализуемую реплику этой структуры и выставить ее в Vue. Вот наивный пример, в котором используется простой счетчик для предоставления Vue информации, обновляемой Set:

data() {
  mySetChangeTracker: 1,
  mySet: new Set(),
},

computed: {
  mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it,
    // so it gets re-evaluated whenever `mySetChangeTracker` changes
    return this.mySetChangeTracker && Array.from(this.mySet);
  },
},

methods: {
  add(item) {
    this.mySet.add(item);
    // Trigger Vue updates
    this.mySetChangeTracker += 1;
  }
}

Это иллюстрирует любопытный хакерский, но 100% метод работы для того, чтобы сделать ненаблюдаемые данные реактивными. Тем не менее, в реальных случаях я заканчивал сериализованными версиями Sets / Maps (например, вы, вероятно, захотите сохранить модифицированные версии наборов / карт в localstorage и, таким образом, сериализовать их в любом случае), поэтому никаких искусственных счетчиков / хаков не было.