Как динамически изменять значения магазина Vuex - PullRequest
Новая
       9

Как динамически изменять значения магазина Vuex

0 голосов
/ 23 января 2019

Я пытался найти способ использовать Vue.set() для динамического изменения связанных данных в хранилище Vuex. Однако найти его оказалось трудным, поэтому я попробовал несколько способов выяснить свое собственное решение, и, наконец, это то, что сработало. Это довольно отвратительно, так что зрителям рекомендуется усмотрение.

Вот мое решение: 

  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, и изменить ее на желаемое значение. Цель состоит в том, чтобы не создавать мутации для каждого ключа в отдельности.

1 Ответ

0 голосов
/ 23 января 2019

Я не пробовал, но это должно работать.Вы перебираете ключи маршрута и сохраняете ссылку на окончательно вложенный объект и передаете его в 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
    )
  }
}
...