Vuex

1. Concept

A Vue plug-in that implements centralized state (data) management in Vue. It centrally manages (reads / writes) the shared state of multiple components in Vue applications. It is also a way of communication between components and is suitable for communication between any components

2. When to use?

When multiple components need to share data

3. Build vuex environment

1. Create file: Src / store / index js

   //This file is used to create the most core store in Vuex
   
   //Introduce vue
   import Vue from 'vue'
   //Introduce Vuex
   import Vuex from 'vuex'
   //Applying the Vuex plug-in
   Vue.use(Vuex)
   
   //Prepare action -- used to respond to actions in the component
   const actions = {}
   //Prepare mutations -- for manipulating data (state)
   const mutations =  {}
   //Prepare state -- for storing data
   const state = {}
   
   //Create and expose the store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })
    
   

   1. In main Pass in the store configuration item when creating in JS

   //Introducing store
   import store from './store/index'
   
   new Vue({
       el:"#app",
       render:h=>h(App),
       store,
       beforeCreate(){
           //Set the global event bus (to make this.$bus call $emit and $on)
           Vue.prototype.$bus = this
       }
   })
   

4. Basic use

1. Initialize data, configure action, configure mutation, and operate the file store js

   //This file is used to create the most core store in Vuex
   
   //Introduce vue
   import Vue from 'vue'
   //Introduce Vuex
   import Vuex from 'vuex'
   //Applying the Vuex plug-in
   Vue.use(Vuex)
   
   //Prepare action -- used to respond to actions in the component
   const actions = {
        jia(context,value){
            context.commit('JIA',value)
        },
       
   }
   //Prepare mutations -- for manipulating data (state)
   const mutations =  {
       JIA(state,value){
           state.sum+=value
       }
   }
   //Prepare state -- for storing data
   const state = {
       sum:0//Current and
   }
   
   //Create and expose the store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })
    
   

2. Read data from vuex in component: $store state. Sum, you can not write this in the template because {}} can read everything in the vm

3. Modify data in vuex in component: $store Dispatch ('method name in action ', data) or $store Commit ('method name in mutation ', data)

5. Use of Getters

1. Concept: when the data in state needs to be processed and then used, getters processing can be used

2. Store JS to add getters configuration

   ......
   
   //Prepare getters - used to process the data in state
   const getters = {
       bigSum(state){
           return state.sum*100
       }
   }
   
   //Create and expose the store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
       getters,
   })
   

   1. Read data from component: $store getters. bigSum

6. Use of four map methods

1. mapState method: it is used to help us map the data in state into calculated attributes

   computed:{
           
     // Generate calculation properties with mapState and read data from state (object writing method)
    ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
   
    // Generate calculation properties with mapState and read data from state (array writing method)
    ...mapState(['sum','school','subject']),
       },
   

2. mapGetters method: used to help us map the data in getters into calculated attributes

   //Generate calculation properties with mapGetters and read data from state (object writing method)
           // ...mapGetters({bigSum:'bigSum'}), 
           //Generate calculation properties with mapGetters and read data from state (array writing method)
           ...mapGetters(['bigSum']), 
   

3. mapActions method: a method used to help us generate a dialogue with actions, that is, $store Function of dispatch (xxx)

   methods:{
   	//Generated by mapActions, incrementadd, incrementwait (object form)
   	...mapActions({incrementOdd:'jia',incrementWait:'jiawait'})
   	//Generate the corresponding method with mapActions. In the method, dispatch will be called to contact actions (array writing method)
       ...mapActions(["add3", "jiaWait"]),
   	
   }
   

4. mapMutations method: a method used to help us generate a conversation with mutations, that is, $store Function of commit (xxx)

   methods:{
   	//Generate the corresponding method with mapMutations, and the commit method will be called in the method to contact mutations (object writing method)
       // ...mapMutations({add1:'JIA',add2:'JIAN'}),
       //Generate the corresponding method with mapMutations, and the commit method will be called in the method to contact mutations (writing method of array)
       ...mapMutations(["JIA", "JIAN"]),
   }
   

   Note: when mapActions and mapMutations are used, if parameters need to be passed, pass the parameters when binding events in the template; otherwise, the parameters are event objects

7. Modularization + namespace

1. Purpose: to better maintain the code and make the classification of multiple data more clear
2. Modify store js

const countAbout={
    namespaced:true,//Open namespace
    state:{x:1},
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
    ......
}
const personAbout={
    namespaced:true,//Open namespace
    ......
}
//Create and expose the store
export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

1. After the namespace is opened, the state data is read from the component

   //Method 1: read data by yourself
   this.$store.state.personAbout.list
   //Method 2: read with mapState,
   ...mapState('countAbout',['x']),
   

2. After the namespace is opened, the getters data is read from the component

   //Method 1: read data by yourself
   this.$store.getters['personAbout/first']
   //Method 2: read with mapGetters,
   ...mapGetters('countAbout',['bigSum']),
   

3. After the namespace is opened, the dispatch is read from the component

   //Method 1: directly dispatch yourself
   this.$store.dispatch['personAbout/add',parameter]
   //Method 2: with mapActions
   ...mapActions('countAbout',['add']),//If you want to pass parameters here, you should call this function
   

4. After namespace is opened, commit is invoked in the component.

   //Method 1: commit yourself directly
   this.$store.commit('personAbout/Add_person',parameter)
   //Mode 2:
   ...mapCommit('personAbout',[Add_person])