如何动态更改 Vuex 存储值

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
    )
  }
}