Vuex (Vue plugin for multi-component data sharing)

1. Concept

A Vue plug-in that implements centralized state (data) management in Vue, and performs centralized management (read/write) on the shared state (data) of multiple components in Vue applications. It is also a way of communication between components, and Suitable for communication between arbitrary components.

2. When to use

When multiple components need to share data.

3. Build the Vuex environment

1. Create a file:src/store/index.js

   //Introduce the Vue core library 
   import Vue from 'vue' 
   //Introduce Vuex 
   import Vuex from 'vuex' 
   //Apply the Vuex plug-in 
   Vue.use(Vuex) 
   ​//
   Prepare the actions object - respond to the user's behavior in the component 
   const actions = { } 
   //Prepare mutations object - modify state (data) in state 
   const mutations = {} 
   //Prepare state object - save specific data 
   const state = {} 
   ​//
   Create and expose store 
   export default new Vuex.Store({ 
       actions , 
       mutations, 
       state 
   })

2. Pass in configuration items main.jswhen creating a vm instore

   ...
   import store from './store/index.js'
   ...
   ​
   //
   new Vue({
       el:'#app',
       render:h => h(App),
       store
   })

4. Use of Vuex

1. Initialize data, configuration actions, mutations, operation filesstore.js

   //Introduce the Vue core library 
   import Vue from 'vue' 
   //Introduce Vuex 
   import Vuex from 'vuex' 
   //Apply the Vuex plug-in 
   Vue.use(Vuex) 
   ​//
   Prepare the actions object - respond to the user's behavior in the component 
   const actions = { 
       //Response to the action of jia in the component 
       jia(context,value){ 
           context.commit('JIA',value) 
       } 
   } 
   //Prepare the mutations object - modify the state (data) in the state 
   const mutations = { 
       //Execute JIA 
       JIA (state,value){ 
           state.sum+=value 
       } 
   } 
   //Prepare state object - save specific data 
   const state = { 
       sum:0 
   } 
   ​//
   Create and expose store 
   export default new Vuex.Store({ 
       actions, 
       mutations, 
       state
   })

2. Read the data in Vuex in the component:$store.state.sum

3. Modify the data in Vuex in the component: $store.dispatch('actions中的方法名',数据)or$store.commit('mutations中的方法名',数据)

<!--Remarks: If there is no network request or other business logic, components can skip actions, that is, do not write `dispatch`, directly write `commit`-->

5. Use of getters

1. Concept: When the data in the state needs to be processed before use, getters can be used for processing.

2. Append getters configuration in store.js

   ... 
   const getters = { 
       bigSum(state){ 
           return state.sum*10 
       } 
   } 
   ​//
   Create and expose store 
   export default new Vuex.Store({ 
       ... 
       getters 
   })

3. Read data in the component:$store.getters.bigSum

6. The use of four map methods

1. mapState method : used to help us map statethe data into computed properties

   computed:{ 
       //Generate computed attributes with mapState: sum, school, subject (object writing) 
       ...mapState({sum:'sum',school:'school',subject:'subject'}), 
    
       //with mapState Generate calculated properties: sum, school, subject (array writing) 
       ...mapState(['sum','school','subject']), 
   }

2. mapGetters method : used to help us map gettersthe data into computed properties

   computed:{ 
       // Generate computed properties with mapGetters: bigSum (object writing) 
       ...mapState({bigSum:'bigSum'}), 
    
       //Generate computed properties with mapGetters: bigSum (array writing) 
       ...mapState([' bigSum']), 
   }

3. mapActions method : actionsthe method used to help us generate and dialogue, that is, the included $store.dispatch(xxx)function

   methods:{ 
       //generated by mapActions: incrementOdd, incrementWait (object writing method) 
       ...mapState({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}), 
    
       //generated by mapActions: incrementOdd, incrementWait (array writing method) 
       . ..mapState(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']), 
   }

4. mapMutations method : mutationsthe method used to help us generate and talk, that is, the included $store.commit(xxx)function

   methods:{ 
       //Generate by mapMutations: increment, decrement (object writing) 
       ...mapState({increment:'jia', decrement:'jian'}), 
    
       //Generate by mapMutations: increment, decrement (array writing) 
       . ..mapState(['increment':'jia','decrement':'jian']), 
   }

<!--Remarks: mapActions and mapMutations, if you need to pass parameters: you need to pass parameters when binding events in the template, otherwise the parameters are event objects. -->

7. Modularity + Namespace

1. Purpose: Make the code easier to maintain and make the data classification clearer.

2. Revisestore.js

   const countAbout = { 
       namespaced:true,//open namespace 
       state:{...}, 
       actions:{ 
           jiaOdd(context,data){...} 
       }, 
       mutations:{ 
           jia(state,data){... } 
       }, 
       getters{ 
           bigSum(state){...} 
       } 
   } 
   ​const
   personAbout = { 
       namespaced:true,//Open namespace 
       state:{ 
           list:[...] 
       }, 
       actions:{...}, 
       mutations:{...}, 
       getters{...} 
   } 
              
   const store = new Vuex. Store({ 
       modules:{ 
           countAbout, 
           personAbout 
       } 
   })

3. After enabling the namespace, the component reads the state data:

   //Method 1: Read 
   this.$store.state.personAbout.list by yourself 
   //Method 2: Use mapState to read 
   ...mapState('personAbout',['list'])

4. After enabling the namespace, the component reads the getters data:

   //Method 1: Read 
   this.$store.getters['countAbout/bigSum'] by yourself 
   //Method 2: Use mapGetters to read 
   ...mapGetters('countAbout',['bigSum'])

5. After the namespace is enabled, dispatch is called in the component:

   
   //Method 1: Dispatch this.$store.dispatch('countAbout/jiaOdd', data) directly by yourself 
   //Method 2: Use mapActions to read 
   ...mapActions('countAbout',['incrementOdd':'jiaOdd'] )

6. After the namespace is enabled, commit is called in the component:

   //Method 1: Directly commit 
   this.$store.commit('countAbout/jia', data) 
   //Method 2: Use mapMutations to read 
   ...mapMutations('countAbout',['increment':'jia'] )