为什么我不能使用括号表示法+变量将属性分配给对象？答案

【问题标题】：Why can't I assign a property to an object using bracket notation + a variable?为什么我不能使用括号表示法+变量将属性分配给对象？
【发布时间】：2018-12-26 11:07:25
【问题描述】：

我对 Vuex 非常陌生，并试图为 Vuex 状态分配一个值（state.map.status.isReady 代表这个）。

但是，我想让我的代码可重用，所以我创建了一个函数 changeMapStatus(state, key, value) 来实现这一点。

此函数将其收到的属性state.map.status.key 修改为value。

但是，当我从组件文件中使用this.$store.commit('changeMapStatus', 'isReady', true) 调用突变时，它只是删除了state.map.status.isReady，并且该属性变为undefined。

另一方面，如果我将功能更改为

changeMapStatus(state, value) {
  state.map.status.isReady = value;
}

它以某种方式起作用。

你能帮我看错哪一点吗？

非常感谢！

store.js (Vuex)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    map: {
      status: {
        isReady: false,
      },
    },
  },
  mutations: {
    changeMapStatus(state, key, value) {
      state.map.status[key] = value;
    }
  },
});

【问题讨论】：

你觉得我的回答有用吗？
@BoussadjraBrahim 是的，我愿意。但是，我仍然无法理解为什么会这样。
它只是该函数接受两个参数，因此为了处理你应该传递第二个参数作为包装所有你想要的对象

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

根据Vuexofficial docs，mutation 需要两个参数 state 和 payload。您可以使用扩展运算符从有效负载中获取值。

changeMapStatus(state, {key, value}) {
  state.map.status[key] = value;
}

this.$store.commit('changeMapStatus', {key: 'isReady', value: true})

否则你可以这样使用它

changeMapStatus(state, payload) {
  state.map.status = {
      ...state.map.status,
      ...payload,
  }
}

this.$store.commit('changeMapStatus', { isReady: true });

【讨论】：

【解决方案2】：

您可以传递一个对象作为包含key 和value 的参数，如下所示：

changeMapStatus(state, myObj) {
  state.map.status[myObj.key] = myObj.value;
}

然后这样称呼它：

this.$store.commit('changeMapStatus', {key:'isReady', value:true})

【讨论】：