Question

我试图找到一种方法，可以使用Vue.set()动态更改Vuex存储中的绑定数据。但是，事实证明很难找到它，所以我尝试了几种方法来找出自己的解决方案，最后这才起作用。非常恶心，因此建议观众谨慎选择。

这是我的解决方案atm是什么：

  mutations: {
    add_to_store(state, [route, key, value]){
      const call_vue_set_with_dinamic_params = new Function(
        "Vue",
        "state",
        "route",
        "key",
        "value",
        `Vue.set(state${route === "" ? "" : `.${route}`}, key, value)`
      );

      call_vue_set_with_dinamic_params(Vue, state, route, key, value)
    }
  }

我认为对于任何时间花些时间尝试并优化它的人来说，这可能是一个有趣的练习，因为我个人有些失落。我尝试将找到的对象传递到Vue.set()中，就像这样：

const create_nested_object = ( base, names ) => {
  names.split(".").forEach(name => {
    base = base[ name ] = base[ name ] || {}
  })
  return base
}

mutations: {
  add_to_store(state, [route, key, value]){  
    Vue.set(
      create_nested_object(state, route),
      key,
      value
    )
  }
}

但是那没有用。我还尝试了用新创建的state覆盖整个state，它确实覆盖了它，但是阻止了它的响应。

基本上，该突变应该执行的操作是使用一个带有到达所需对象的路由的字符串，例如：user.hair.color，并将其更改为所需的值。目的是不必为每个键分别创建一个突变。

Answer 1

我没有尝试过，但这应该可行。您遍历路线键并保留最终嵌套对象的引用，并将其传递给您的Vue.set

const create_nested_object = ( base, names ) => {
  let ref = base
  names.split('.').forEach(name => {
    ref = ref[name]
  })

  return ref
}

mutations: {
  add_to_store(state, [route, key, value]){
    Vue.set(
      create_nested_object(state, route),
      key,
      value
    )
  }
}

如何动态更改Vuex存储值

1 个答案: