Правильный способ создания действий в Vuex

Question

Достаточно ли создать простых (без цепочки вызовов then / catch) vuex-действий как a1?Или мне нужно писать каждый раз, когда Promise создается как a2 (+ также добавить ветку отклонения)?

Заранее спасибо ...

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    state: { ... }
    ...
    actions: {
        a1: (state, response) => {
            state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
        ...        
        },
        a2: (state, response) => {
            return new Promise((resolve) => {
                state.commit('setNavMenu',{signIn: true, signUp: true, signOut: false});
            ...
            resolve();
            });
        },        

...
     

Answer 1

Нет, вы бы делали это только в том случае, если у действия есть асинхронный аспект или вы хотите получить ответ от вашего действия.

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

т.е. (из официального документа)

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // map `this.increment()` to `this.$store.commit('increment')`

      // `mapMutations` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
    })
  }
}

Причина, по которой вы используете действие, заключается в том, что вы имеете дело с асинхронным изменением, например, когда вы хотитеваша мутация для использования данных, поступающих из API.

Answer 2

Можно создать синхронное действие (без обещания или другого асинхронного кода) так же, как ваш первый a1

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

Для получения более подробной информации вы можете проверить официальный документ о действиях https://vuex.vuejs.org/en/actions.html