Can i use new Map() in vuex and computed?

Question

I have a vuex data type as new Map(). and I need to get updated data in 3 components. But when I update vuex state, I can't get the updated data in components, but I can check updated data in console... I think computed can't catch updated value. Please check below code and advise me.

template
    <input type="text" v-model="input" @keypress.enter="save" />
    <table>
      <tr v-for="list in getList" :key="list.id">
        <td>{{ list.id }}</td>
        <td>{{ list.title }}</td>
      </tr>
    </table>

script
methods: {
    save() {
      let newItem = {
        id: this.input,
      };

      let newItemAdded = this.$store.getters.list.set(newItem.id, newItem);
      this.$store.commit("addNewItem", newItemAdded);
    },
}

computed: {
  getList() {
      let a = [];
      this.$store.getters.list.forEach((l) => {
        a.push(l);
      });
      return a;
    },
}

store
getters: {
   list: state => {
      return state.list
    }
},

mutations: {
    addNewItem(state, payload) {
      state.payload = payload
    }
}

I guess you have to override the prototype with vue reactive setter,getter , check source for arrays and make something similar — Estradiaz
@Estradiaz Thanks, but I can't use setter getter.. I have to apply this logic to wrapper component which only mounted() hook is used when i add a new item. for reading, and editing I will use other components. ... ;< — Chawchawchaw

Chawchawchaw Chawchawchaw · Accepted Answer · 2020-07-03T07:41:09

my bad. vuex and computed doesn't support new Map() and Set() as they don't serialize.

I must change the data type.

https://kr.vuejs.org/v2/api/index.html

Can i use new Map() in vuex and computed?

1 Answers