1, Basic concepts

Vuex function: frequent and large-scale data sharing (scenario: shopping cart)

Vuex advantages: 1 Data access in one step. 2. Clear data flow. 3. Responsive.

2, Use steps

1. Lower package  yarn add vuex
2. introduce main.js   import Vuex from 'vuex'
3. Install plug-ins  Vue.use( Vuex )
4. establish store Instance object  const store = new Vuex.Store( { } )
5. Mount to Vue Instance  new Vue( { store } ) 

3, Basic usage of state

Role: store global shared data

usage

1. Define data:

const store = new Vuex.Store({
  state: {
    count: 0 // Shared data
  }
})

2. Data used in components

Direct access 
  this.$store.state.count
 Auxiliary function access
  1. Import auxiliary functions on demand
     import { mapState } from 'vuex'
  2. stay computed The auxiliary function is called and the result is expanded.
     computed: {
       ...mapState(['count'])
     }
Auxiliary function principle: mapState() What you get is an object, There is a function corresponding to the imported data in the object{ count: function() {} }

4, Basic usage of mutations

Function: modify the data in state. The data in state must be modified by the function of changes. Only in this way can it be monitored by DevTools

usage

1. Define function

const store = new Vuex.Store({
  state: {
    count: 0 // Shared data
  },
  mutations: {
    add(state) {
      state.count ++
    }
  }
})
be careful:1.All mutations The first argument of the function is state
     2.The second parameter is the load payload, Parameters passed when calling the method

1. Calling function in component

Direct call
   this.$store.commit('add')
auxiliary function 
   1. Import auxiliary functions on demand
      import { mapMutations } from 'vuex'
   2. stay methods The auxiliary function is called and the result is expanded.
      methods: {
       ...mapMutations(['add'])
      }
   3. call methods Medium add method
      this.add()

1. Submit payload (call function parameters)

   this.$store.commit('add', { num: 10 })
   this.add({ num: 10 })

5, Basic usage of actions

Function: all asynchronous operations in Vuex need actions

Note: because the changes must be synchronous functions, if asynchronous tasks are performed in the changes, DevTools will not be able to correctly monitor the data changes. The state cannot be directly modified in the actions, so it must be modified by the changes function

usage

1. Define function

const store = new Vuex.Store({
  state: {
    count: 0 // Shared data
  },
  mutations: {
    add(state) {
      state.count ++
    }
  },
  actions: {
    asyncAdd(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

be careful : 1. All actions The first argument of the function is context, Just one store object, Can use commit call mutations function
       2. The second parameter is the load payload, Parameters passed when calling the method		
                       			

1. Calling function in component

Direct call
   this.$store.dispatch('asyncAdd')
auxiliary function 
   1. Import auxiliary functions on demand
      import { mapActions } from 'vuex'
   2. stay methods The auxiliary function is called and the result is expanded.
      methods: {
      ...mapActions(['asyncAdd'])
      }
   3. call methods Medium asyncAdd method
      this.asyncAdd()

1. Submit payload (call function parameters)

  this.$store.dispatch('asyncAdd', { num: 10 })
  this.asyncAdd({ num: 10 })

6, Basic usage of getters

Function: Global Shared calculation attributes, which solves the problem of limitation of calculation attributes in components

usage

1. Define getters

const store = new Vuex.Store({
  state: {
    count: 0 // Shared data
  },
  getters: {
    total(state) {
      return state.count * 10
    }
  }
})

be careful : All getters The first argument of the function is state

1. Using getters in components

Direct use
  this.$store.getters.total				
auxiliary function 			
  1. Import auxiliary functions on demand
     import { mapGetters } from 'vuex'				
  2. stay computed The auxiliary function is called and the result is expanded.
     computed: {
      ...mapGetters(['total'])
     }
  3. Call calculated properties
     this.total

7, Basic usage of modules

Function: when the project is large, there will be data of many modules. If they are all managed globally, it will cause great difficulties. They will be divided into multiple sub modules for management

usage

1. Define sub modules
   Write a js file and export an object in which the core members of Vuex are stored
2. Import sub module
   import count from './count.js'
3. Registration sub module
   const store = new Vuex.Store({
   modules: {
   //Module name: module object
   count
   }
   })

8, Open namespace

Function: if there is no namespace, the data or changes in all sub modules are approximately equal to the global. If there is the same name, they will be triggered at the same time. There is no way to achieve good isolation

usage

1. Set the named attribute in the sub module to true

2. After opening, the state / changes / actions / getters of the access sub module have changed

state
	auxiliary function  mapState
	...mapState('Name of the registration module', [Data to map])
mutations
	1. use commit method
		$store.commit('Module name/Method name')
	2. auxiliary function 
		...mapMutations('Module name', [Method to map])
actions
	1. use dispatch method
		$store.dispatch('Module name/Method name')
	2. auxiliary function 
		...mapActions('Module name', [Method to map])
getters
	auxiliary function  mapGetters
	...mapGetters('Module name', [Calculated attribute to map])