Vue – Manage state using Vuex

• Install Vuexnpm install vuex --saveUsed to manage status data retrieved from the background
• The following code uses the home page Msite as an example

1. Create a Store(core repository)

• Create index.js under the store folder of your project

/* Vuex's core managed object store */
// First introduce Vue and Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// Introduce four basic modules
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

// Be sure to declare the use of plug-ins
Vue.use(Vuex)

// Provide the store object to the "store" option, which injects store instances into all child components
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
Copy the code

2. Module object

2.1 the State

• Analyze and sort out what states need to be managed in the Msite of the home page of the project, and then write state.js

/* State object state */
export default {
  latitude: 40.10038./ / latitude
  longitude: 116.36867./ / longitude
  address: {}, // Address related information object
  categorys: [].// Food category array
  shops: [] // Array of merchants
}
Copy the code

2.2 Mutation

• The only way to change the state in Vuex’s store is to commit mutation

• Each mutation has a string event type (type) and a callback function (handler)

• We can replace Mutation event types with constants and create a new retro-types file

  /* Contains n mutation type name constants */
  export const RECEIVE_ADDRESS = 'receive_address' // Receive address information
  export const RECEIVE_CATEGORYS = 'receive_categorys' // Receive the classification array
  export const RECEIVE_SHOPS = 'receive_shops' // Receive an array of merchants
  Copy the code

• Then introduce **(note the writing format)** in the articles.js file

Vuex mutations module */
import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS} from './mutation-types'

// [name](state,{param}){}
export default {
	[RECEIVE_ADDRESS](state, {address}) {
		state.address = address
	},
	[RECEIVE_CATEGORYS](state, {categorys}) {
		state.categorys = categorys
	},
	[RECEIVE_SHOPS](state, {shops}) {
		state.shops = shops
	}
}
Copy the code

• The callback function is where we actually make the state change, and it accepts state as the first argument

2.3 the Action

Action is similar to mutation, except that:

• The Action commits mutation rather than a direct state change.
• Actions can contain any asynchronous operation.

// Action: Objects of multiple methods that update state indirectly by the mutation operation
// Note the introduction of API interface functions
import {reqAddress, reqCategorys, reqShops} from '.. /api'
import {RECEIVE_ADDRESS, RECEIVE_CATEGORYS, RECEIVE_SHOPS} from './mutation-types'
export default {
 // Get the address asynchronously
 async getAddress ({commit, state}) {
   // Get the latitude and longitude parameter used to set the reqAddress from the state (see interface document)
   const geohash = state.latitude + ', ' + state.longitude
   
   // 1. Send asynchronous Ajax requests
   const result = await reqAddress(geohash)
   // 2. Commit a mutation based on the result
   commit(RECEIVE_ADDRESS, {address: result.data})
 },
 // Get the list of categories asynchronously
 async getCategorys ({commit}) {
   const result = await reqCategorys()
   commit(RECEIVE_CATEGORYS, {categorys: result.data})
 },
 // Get the list of merchants asynchronously
 async getShops ({commit, state}) {
   // Destruct assignment of an object
   const {latitude, longitude} = state
   // Pay attention to the order of arguments
   const result = await reqShops({latitude, longitude})
   commit(RECEIVE_SHOPS, {shops: result.data})
 }
}
Copy the code

• Vuex setting of the home page status data has been completed

2.4 the Getter

Getters are used to process data in a Store to form new data

• Getters can process existing data in the Store to form new data, similar to the calculation properties of Vue
• As the data in the Store changes, so does the data in the Getter.

3. Obtain and display data asynchronously

1. Register a store in your project

   // The project's main.js file
   import store from './store'
   
   new Vue({
   	store
   })
   Copy the code

2. Test asynchronously fetching current address data

   // Address information should be retrieved as early as possible, so requests can be written in app.vue
   // First remove the code that was previously tested using the encapsulated Ajax interface
   async mounted () {
       // Invoke Action via the this.$store.dispatch method
       this.$store.dispatch('getAddress')}Copy the code

   • Run the project, open the VUE development tool in the browser console, switch to Vuex, and you can see the status data obtained asynchronously through VUEX
   • In addition to this method calling action, you can also use mapActions syntax sugar

   import {mapActions} from 'vuex'
   
   async mounted () {
       this.getAddress()
   }
   methods: {
   	...mapActions(['getAddress'])}Copy the code

3. Read and display the current address data obtained

   • The address information is displayed in the Msite component on the home page

   // Use the mapState syntax sugar to read the state object
   import {mapState} from 'vuex'
   
   computed: {
   	...mapState(['address'])}Copy the code

   <HeaderTop :title="address.name">
   // Change the static address information to the address data obtained asynchronously
   </HeaderTop>
   Copy the code