How to use action and mutations of store in vuex

In this article, the editor introduces in detail "how to use action and mutations of store in vuex". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use action and mutations of store in vuex" can help you solve your doubts.

The difference between action and mutations (this.$store.dispatch and this.$store.commit)

All call methods in vuex. One asynchronous and one synchronous.

Dispatch: contains asynchronous operations, such as submitting data to the background, written as this.$store.dispatch ('action method name', value)

Commit: synchronous operation, written as this.$store.commit ('mutations method name', value)

Action:

1. Used to change data by submitting mutation

2. It will be encapsulated as a Promise by default.

3. Can include any asynchronous operation

Mutations:

1. Change the data by submitting commit

2. it's just a simple function.

Do not use asynchronous operations, which can cause variables to be untraceable. In other words, use the function in action to call the function in mutations to manipulate the data in state asynchronously.

Usage dispatch: contains asynchronous operations

Storage:

This.$store.dispatch ('initUserInfo',friend)

Value:

This.$store.getters.userInfo;commit: synchronous operation

Storage:

This.$store.commit ('initUserInfo',friend)

Value:

This.$store.state.userInfo; instance

1 、 login.vue

2 、 user.js

3 、 login.js

What are action and mutation used to handle respectively?

Action handles asynchronous data and finally submits it to the database

Mutation is used to synchronize data for business processing (the only way to change store data in vuex is mutation)

Action submits the mutation instead of directly changing the state.

After reading this, the article "how to use action and mutations of store in vuex" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, please follow the industry information channel.