在 Vuex 状态中使用 Map答案

【问题标题】：Using a Map inside of Vuex state在 Vuex 状态中使用 Map
【发布时间】：2020-02-13 16:50:35
【问题描述】：

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

我想使用 Vuex 跨多个模块存储一些基本的用户首选项，并认为Map 是一种简单的方法，因为首选项可以作为简单的键/值对处理.但我要么没有正确定义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 对象开始，但结果也不顺利。

【问题讨论】：

我不相信 Vue 2 对 Map 或 Set 的反应性有任何支持。这并不意味着它们不能被使用，但它们不会响应变化。你没有提供足够的细节来说明你必须知道这是否相关的问题的性质。
抱歉，我更新了问题以包含具体的错误消息。
哦，我明白了，这是 TypeScript 错误，而不是 Vue 错误。我不知道任何 TypeScript，但有点谷歌搜索让我觉得你可能需要将userSettings: Map 更改为其他内容，可能是userSettings: new Map()。目前您将Map 构造函数分配为userSettings 的初始值。

标签： dictionary state vuex

【解决方案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。

【讨论】：

这肯定会修复错误，但我将如何使用它来处理对象集合？我使用 Map 的最初目标是拥有可搜索或可过滤的用户偏好集合。我将如何添加额外的首选项或稍后检索它们？
@KrisKramer 我不明白你在问什么。对象允许键/值对与问题中使用的 Map 相同。我不清楚为什么使用对象会阻止您过滤、搜索、添加或检索值。