в чем разница между мутацией и действием

Question

В Vuex, какова логика наличия как «действий», так и «мутаций»?

Я понимаю логику компонентов, не способных изменять состояние (что кажется разумным), но наличие как действий, так и мутаций похоже на то, что вы пишете одну функцию для запуска другой функции, чтобы затем изменить состояние.

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

Я пытался .......

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // mutate state
      state.count++
    }
  }
})

Код ошибки 502

Answer 1

Действия и мутации схожи по своему поведению, поэтому различия таковы:

• Действия не могут изменить ваше состояние напрямую, поэтому им нужно совершить операцию для ваших мутаций.
• Подумайте о действиях, подобных вашим функциям.
• Мутации ответственны за изменение вашего состояния в магазине Vuex.Чтобы вызвать мутацию, вы должны совершить действие, которое вызывает мутацию.

Пример:

 actions: {
    MODIFY({dispatch, commit, getters, rootGetters}, obj) {
        //Do something
        commit('mymutation', obj)
    }
}

mutations: {
    mymutation(state, obj) {
        store.state.count = 1
    }
}

Подробнее о мутациях и действиях можно прочитать в Документация Vuex

Answer 2

Мутации должны быть синхронными , поэтому невозможно изменить состояние в асинхронной операции.

Для решения этой проблемы vuex предоставляет действий , которые изменяют состояниесовершив синхронные мутации

Если у вас есть операция синхронизации, просто используйте мутация , в противном случае действие + мутация

Answer 3

1. Компоненты не должны напрямую изменять состояние.
2. Таким образом, вы должны запустить действие из компонента.
3. В действии у вас будет бизнес-логика, такая как вызов API, и он вызовет вызов MUTATION, когда происходит обновление состояния.