Proper method of defining an action in Vuex

Question

Proper method of defining an action in Vuex

Do you think it's sufficient to create vuex-actions as simple as a1, without chaining then/catch calls? Or should I always go with creating Promises as in a2 (and also adding a reject branch)?

Appreciate your insights...

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();
            });
        },        

...

javascript vue.js vuex

Answer 1

Answer №1

Creating a synchronous action without using promises or other asynchronous code is indeed possible, similar to your initial example a1.

In this case, you can directly call the mutation function, which would be setNavMenu for a1. Actions and mutations differ in that actions can be asynchronous while mutations are not. If your action does not require asynchronous code, opting for a mutation instead of an action may suffice.

For more information, refer to the official documentation on actions at https://vuex.vuejs.org/en/actions.html

Answer 2

Creating a synchronous action without using promises or other asynchronous code is indeed possible, similar to your initial example a1.

In this case, you can directly call the mutation function, which would be setNavMenu for a1. Actions and mutations differ in that actions can be asynchronous while mutations are not. If your action does not require asynchronous code, opting for a mutation instead of an action may suffice.

For more information, refer to the official documentation on actions at https://vuex.vuejs.org/en/actions.html

Answer 3

Answer №2

In scenarios where the action involves an asynchronous component or if you require a response from the action, it would be appropriate to use actions in Vuex.

However, if all your updates are synchronous and do not rely on any API calls or asynchronous feedback, you have the option to directly call mutations without going through actions.

For example, as mentioned in the official documentation:

import { mapMutations } from 'vuex'

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

      // Payloads can also be supported by mapMutations:
      'incrementBy' // this.incrementBy(amount) corresponds to this.$store.commit('incrementBy', amount)
    ]),
    ...mapMutations({
      add: 'increment' // this.add() corresponds to this.$store.commit('increment')
    })
  }
}

The main reason for utilizing actions is when dealing with asynchronous changes, such as situations where you need your mutation to utilize data from an API.

Answer 4

In scenarios where the action involves an asynchronous component or if you require a response from the action, it would be appropriate to use actions in Vuex.

However, if all your updates are synchronous and do not rely on any API calls or asynchronous feedback, you have the option to directly call mutations without going through actions.

For example, as mentioned in the official documentation:

import { mapMutations } from 'vuex'

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

      // Payloads can also be supported by mapMutations:
      'incrementBy' // this.incrementBy(amount) corresponds to this.$store.commit('incrementBy', amount)
    ]),
    ...mapMutations({
      add: 'increment' // this.add() corresponds to this.$store.commit('increment')
    })
  }
}

The main reason for utilizing actions is when dealing with asynchronous changes, such as situations where you need your mutation to utilize data from an API.

Proper method of defining an action in Vuex

Answer №1

Answer №2

Similar questions

What is the best way to transform a list of Python+Flask objects into a list of JavaScript objects?

Retrieving the selected value from a dropdown menu without having to click on a

Can you help me understand how to access data from a selected option?

Using Jquery to toggle visibility and position of a button when clicked

Working on executing various methods with a JavaScript client on a Flask RESTful API that requires authentication

The React router Link does not update the route after an if statement is executed

Exploring the World of Angularjs 2

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

SSE and the power of NodeJS through Express

What is the method for bringing in Mongoose to utilize json.parse()?

Why is Handlebars {{body}} not rendering my HTML tags properly?

In my Next.js project, I am looking for a way to make a modal continue to stay

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

What is the process for executing a Js file on a website?

I'm curious about the correct method for updating a parent component using a shared service within the ngOnInit function in Angular version 13

Retrieving the chosen option from a dropdown menu using AngularJS

The JSONP file can be successfully retrieved through an AJAX request in the console, however, the data does not display when attempting

Loading New Page When Iframe is Loaded

When the limit is set to 1, the processing time is 1ms. If the limit is greater than 1, the processing time jumps to