Question

我是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;
    }
  },
});

Answer 1

您可以按如下方式传递包含key和value的对象作为参数：

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

并这样称呼它：

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

Answer 2

根据Vuex official docs，变异需要2个参数状态和有效负载。您可以使用散布运算符从有效负载中获取值。

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 个答案: