Vuex - 错误“无法读取未定义的属性（读取“设置”）”当使用 Vue.set() 时

Question

尝试使用 Vue.set() 时，我在控制台中收到以下错误：

我缺少导入吗？我正在尝试更新对象数组 - 有人可以帮忙吗？

谢谢

import { VueElement } from 'vue'
import Vue from 'vue'
import Vuex from 'vuex'
import { createStore } from 'vuex'

export default createStore({
  state: {
    activeLightScenes: [
      {'room': null, 'scene': null},
      {'room': null, 'scene': null},
      {'room': null, 'scene': null},
      {'room': null, 'scene': null},
    ]
  },
  mutations: {
    updateLightScenes(state, room, scene){

      Vue.set(state.activeLightScenes, 'room', room, 'scene', scene)
    },
  },

  getters:{


  },

  actions: {

  },

  modules: {

  },

})

Answer 1

您可能安装了 Vue 3，并且 vue@3 没有默认导出，因此 Vue 将为 undefined，从而导致您观察到的错误Vue.set。但是，在 Vue 3 中，您不需要使用像 Vue.set 这样的东西。等效的代码只是直接设置变量。

假设您还传递了 state.activeLightScenes[] 中元素的数组索引，该索引将包含指定的 room 和 scene 参数：

export default  createStore({
  ⋮
  mutations: {
    updateLightScenes(state, room, scene, index) {
      // Vue.set(state.activeLightScenes, 'room', room, 'scene', scene) ❌ remove this
      state.activeLightScenes[index].room = room
      state.activeLightScenes[index].scene = scene
    },
  }
})