在 Vuex 状态中使用 Map

Question

我正在构建一个原型模块来了解Vuex并遇到一个看起来很简单的问题——我在使用 aMap作为我的状态变量之一时遇到了麻烦。

我想使用Vuex在多个模块中存储一些基本的用户首选项，并认为 aMap将是一种简单的方法，因为首选项可以作为简单的键/值对处理。但是我要么没有Map正确定义，要么在突变中没有正确使用它。

<script lang="ts">
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userSettings: Map,
  },
  mutations: {
    addUserSetting(state, payload) {
      if (state.userSettings == null) {
        state.userSettings = new Map();
      }
      state.userSettings.set(payload.key, payload.value);
    }

  },

})


</script>

我愿意使用另一个对象，并且我从一个UserPref对象数组开始，但也不顺利。

Answer 1

Vue 2 对Map.

假设您的键是字符串，我建议使用 Object 代替。要获得一个完全空的对象（没有继承的属性，甚至没有toString），您可以使用Object.create(null)，或者{}如果这似乎没有必要，则只使用普通对象。

例如

import Vue from 'vue'

export default new Vuex.Store({
  state: {
    userSettings: Object.create(null),
  },
  mutations: {
    addUserSetting(state, payload) {
      Vue.set(state.userSettings, payload.key, payload.value);
    }
  }
})

Vue.set 必须在添加属性时使用。