Обновление состояния VueX от действия с фиксацией

Question

Я довольно новичок в Vuex, может кто-нибудь сказать мне, почему я не могу получить доступ к состоянию из действия, изменить его, а затем зафиксировать его? Я делаю «глубокую» копию массива состояний, прежде чем изменить его. Каков альтернативный лучший способ сделать это?

Это мое действие:

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
    var shoppinglist = [...state.shoppinglist]
    var cp = shoppinglist.find(v => v.recipe.id === recipe.id)
    cp.size = size
    commit(Mutation.SET_SHOPPINGLIST, shoppinglist)
}

Answer 1

Вносить изменения в состояние только в мутациях. (Вот почему это называется мутациями.) Вам не нужно клонировать список. Создайте мутацию для установки cp size:

SET_CP_SIZE(state, { cp, size }) {
  cp.size = size;
}

И в вашем действии:

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
  var cp = state.shoppinglist.find(v => v.recipe.id === recipe.id)
  commit(Mutation.SET_CP_SIZE, { cp, size })
}

Этот способ не использует state в мутации напрямую, но это нормально , Вместо этого вы устанавливаете cp, который является элементом некоторого массива состояний.

Answer 2

Лучше всего написать мутацию для обновления состояния. В мутации SET_SHOPPINGLIST вы можете получить доступ к состоянию и установить значения.

Единственный способ действительно изменить состояние в хранилище Vuex - это зафиксировать мутацию. Мутации Vuex очень похожи на события: каждая мутация имеет строковый тип и обработчик. Функция обработчика - это место, где мы выполняем фактические изменения состояния, и оно получит состояние в качестве первого аргумента:

Пожалуйста, обратитесь к ссылке , чтобы увидеть примеры кода.