MapまたはSetの変化にVueを応答させます。


問題の背景
vuexのstateでmapを使いたいです。たくさんの操作が便利になります。

const state = {
 all: new Map()
}
このような書き方は大丈夫です。間違いなく申告します。state.allは正常なMapのように使えます。
しかし、ここで一つの問題があります。Vueの応答システムはMapとSetをサポートしていません。つまり、MapとSetの中の要素が変化した時にVueはこれらの変化を追跡できないので、応答できません。これにより、ページ上のallに依存する要素もallによって変化しません。
解決方法
ユーザー「inca」の回答
you need to create a serialzable replica of this stucture and expose it to Vue

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

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

methods: {
 add(item) {
 this.mySet.add(item);
 // Trigger Vue updates
 this.mySetChangeTracker += 1;
 }
}
解決方法は、順番に並べられるmySetChange Trackerで、変化を手動で追跡することです。
VueはSetの変化を追跡できませんが、mySet Chane Trackerの変化を追跡することができますので、Setが変更された後、手動でmySetChange Trackerの値を変更すると、Vueは私のデータの変化を知ることができます。
mySetAssListにvar x=this.mySetCharnge Trackerを書き込むと、mySetChange Trackerが更新されると、mySetAssListが応答します。
補足知識:vueレンダリング時のオブジェクトの属性はundefinedを提示しましたが、レンダリングに成功しました。
シーン:
バックグラウンドから要求されたデータ構造は以下の通りである。


私のリストは対象ですが、コメントはまたリストの対象です。レンダリングは成功しましたが、次のようにエラーが発生しました。

解決策:
一つを追加します。v-if

以上のように、VueがMapやSetの変化に応じて操作するということは、小編集が皆さんに提供しているすべての内容を共有していますので、参考にしていただければと思います。よろしくお願いします。