在 Vuex 的状态下动态创建一个响应式数组答案

【问题标题】：Dynamically creating a reactive array in the Vuex's state在 Vuex 的状态下动态创建一个响应式数组
【发布时间】：2018-02-23 14:13:51
【问题描述】：

我的组件想向 SST (vuex) 添加一个新的反应数组字段。我尝试了 beforeCreate 钩子，但添加的数组不是反应性的；它只是一个普通的 JS 数组。

请注意，这与在 Vue 初始化时创建的现有数组中添加/删除元素不同。这样的数组被“包装”并按预期变得反应，注意“Array Change Detection”陷阱。

在我的例子中，我正在尝试向 SST 动态添加一个全新的数组类型字段，并同时使其具有反应性。可能吗？

【问题讨论】：

究竟是如何添加数组类型的新字段的？你能显示一些代码吗？另外，你知道Vue.set()吗？
非常感谢 - 我尝试了 this.$set 但没有得到预期的结果 - 但现在我怀疑自己是否正确使用它；Vue.set 有效。
我添加了一个参考文档的答案。看看它是否符合您的问题。
它做到了，并且给了你应得的荣誉。感谢您的帮助。

标签： vue.js vuejs2

【解决方案1】：

看看Reactivity in Depth - Change Detection Caveats:

变更检测注意事项

由于现代 JavaScript 的限制，Vue 无法检测属性添加或删除。由于 Vue 在执行 getter/setter 转换过程实例初始化，data 对象中必须存在属性以便 Vue 对其进行转换并使其具有反应性。

但你说你是动态添加一个数组：

我正在尝试向 SST 动态添加一个全新的数组类型字段，并同时使其具有反应性。可能吗？

来自docs（粗体是我的）：

Vue 不允许将新的根级反应属性动态添加到已创建的实例中。但是，可以使用Vue.set(object, key, value) 方法向嵌套对象添加反应属性：

Vue.set(vm.someObject, 'myArrayName', [1,2,3]);

这应该可以帮助您使您的数组具有反应性。

【讨论】：

更广泛的描述gist.github.com/DawidMyslak/2b046cca5959427e8fb5c1da45ef7748

【解决方案2】：

我在这里看到两个问题：

使用 vuex 动态添加数组。
向该数组动态添加元素并渲染该元素。

如果 add 方法中不存在数组，我已经启动了数组，因为当我从服务器接收数据时 myArray 不存在。

我的解决方案如下：

myVuexArray.js

import Vue from 'vue'

const state = {
  myObject: {
    myArray: [],
  }
}

const getters = {
  getMyArray: state => {
    return state.myObject.myArray;
  }
}

const mutations = {
  addElementToArray(state, value) {
    if (state.myObject.myArray === null || state.myObject.myArray === undefined || state.myObject.myArray === '') {
      // initiate array
      state.myObject.myArray = [];
    }
    // add new element to array
    Vue.set(
        state.myObject.myArray,
        state.myObject.myArray.length,
        value
    );

    // creates a new array everytime this solves the reactivity issue
    Vue.set(state, 'myObject.myArray', state.myObject.myArray);

    return state.myObject.myArray;
  },
  removeElementFromArray(state, index) {
    state.myObject.myArray.splice(index, 1);
  }
}

export default {
  state,
  mutations,
  getters
}

最好的问候

【讨论】：

【解决方案3】：

动态模块注册可以帮助您实现这一点： https://vuex.vuejs.org/en/modules.html

这将允许您在 beforeCreate 挂钩中动态注册一个包含您的数组字段的新模块。

【讨论】：