Nuxt is a general-purpose framework based on vue.js that integrates most components/frameworks developed using Vue.
Long story short how do you get asynchronous data in vuex-Store?
In Nuxt, the integration of Vuex and other configurations greatly facilitate the use of Vuex; The Nuxt official documentation reads:
Here, the author uses the module to use store for convenience.
1.1 First, create.js files in the Store directory. For business requirements, create.js files of several modules.
Let’s take a look at how new module methods are created in the js file:
1.2 Initialize basic data in state method;
1.3 Update data in the mutation method
Mutations accepts state as the first parameter and can accept other parameters. (Tips:An important rule is to rememberMutation must be a synchronization function.)
Call the mutations method in the component to change the data of the state tree
1.4 How to call asynchronous Data in store?
Since only synchronous methods can be performed in the mutation method, how do you get data from a remote server in a store?
Vuex provides a solution, action, which is similar to mutation and can contain any asynchronous operation. The difference is that the action cannot directly modify the state and can only submit mutation.
Once a method is defined in actions, it needs to be triggered in the component using store.dispatch. (Tips: Pay attention to file location)
Ps: here is only for the author’s use of the discussion, other call methods refer to the official documents;
At this point, two simple methods to change the data in the state tree end, the author will continue to add methods, if there is any error, please give more advice;