1. Call actions directly

This.$store. Dispatch ('action name ', parameter) (2). MapActions ([' mutation name ']),... MapActions ({' new name ': 'mutation name '})}Copy the code

2. Use actions in Modules (namespaced:true)

This.$store. Dispatch (' module name /action name ', parameter) MapActions (' module name ', [' XXX ']),... MapActions (' module name ',{' new name ': 'XXX '})}Copy the code

—-> We can modify state using Action, which is similar to mutation, except that:

- The state can be modified by calling mutation in the action instead of changing the state directly. - Action can contain ** any asynchronous **(such as Ajax requests) operations.Copy the code

Attention! ! ! On definition –> its first argument is that the context object is passed in automatically, and it has the same methods and properties as the Store instance

Call the Action method to send an asynchronous request to change the state data

New vuex.store ({// omit other... Actions: {// the context object is automatically passed in with the same methods and attributes as the store instance. Action name: function(context, payload) {// 1. // 2. Commit ('mutation name ', payload)}}})Copy the code

Putting Ajax requests in actions has two benefits:

- Code is further encapsulated. Bind sending Ajax and saving data to VUex together. - More logical. If data needs to be stored in Vuex's state, the action to retrieve data from the interface is defined in Vuex's ActionsCopy the code