Vuex

1. Concepts

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

2. When to use it?

( When multiple components need to share data

3. Set up vuex environment

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

   //Introducing Vue Core Library
   import Vue from 'vue'
   //Introducing Vuex
   import Vuex from 'vuex'
   //Applying Vuex Plugins
   Vue.use(Vuex)
   
   //Preparing actions objects - responding to user actions in components
   const actions = {}
   //Preparing mutations objects -- modifying data in the state
   const mutations = {}
   //Prepare a state object - save specific data
   const state = {}
   
   //Create and expose store s
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   

2. In main. store configuration item passed in when creating vm in JS

   ......
   //Introducing store
   import store from './store'
   ......
   
   //Create vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
   

4. Basic Use

1. Initialize data, configure actions, configure mutations, and manipulate file store.js

   //Introducing Vue Core Library
   import Vue from 'vue'
   //Introducing Vuex
   import Vuex from 'vuex'
   //Reference Vuex
   Vue.use(Vuex)
   
   const actions = {
       //Actions added in response component
   	jia(context,value){
   		// Console. Log ('jia in actions called', miniStore,value)
   		context.commit('JIA',value)
   	},
   }
   
   const mutations = {
       //Execute Plus
   	JIA(state,value){
   		// Console. Log ('JIA in mutations called', state,value)
   		state.sum += value
   	}
   }
   
   //Initialize data
   const state = {
      sum:0
   }
   
   //Create and expose store s
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

2. Component reads data from vuex: $store.state.sum

3. Component modifies data in vuex: $store. Dispatch ('method name in action', data) or $store. Commit ('method name in mutations', data)

   Note: Without network requests or other business logic, components can also write commit directly without writing dispatch

5. Use of Getters

1. Concept: getters can be used to process data in a state when it needs to be processed before it can be used.

2. In store. Append getters configuration to JS

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

3. Component reads data: $store.getters.bigSum

6.Use of the four map methods

1. The mapState method: Used to help us map the data in the state to a calculated property

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

2. mapGetters method: Used to help us map data in getters as computational attributes

   computed: {
       //Generate calculation properties with mapGetters: bigSum
       ...mapGetters({bigSum:'bigSum'}),
   
       //Generate calculation properties with mapGetters: bigSum
       ...mapGetters(['bigSum'])
   },
   

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

   methods:{
       //Generated by mapActions: incrementOdd, incrementWait (object form)
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //Generated by mapActions: incrementOdd, incrementWait (array form)
       ...mapActions(['jiaOdd','jiaWait'])
   }
   

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

   methods:{
       //Generated by mapActions: increment, decrement (object form)
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //Generation by mapMutations: JIA, JIAN (object form)
       ...mapMutations(['JIA','JIAN']),
   }
   

Note: When using mapActions with mapMutations, if you need to pass parameters, you need to: Pass parameters well when binding events in the template, otherwise the parameters are event objects.

7. Modularization + Namespace

1. Purpose: To make code better maintained and multiple data classifications clearer.

2. Modify store.js

   const countAbout = {
     namespaced:true,//Open Namespace
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//Open Namespace
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
   

3. When the namespace is opened, the component reads the state data:

   //Mode 1: Read directly by yourself
   this.$store.state.personAbout.list
   //Mode 2: Reading with mapState:
   ...mapState('countAbout',['sum','school','subject']),
   

4. When the namespace is opened, the component reads the getters data:

   //Mode 1: Read directly by yourself
   this.$store.getters['personAbout/firstPersonName']
   //Mode 2: Read with mapGetters:
   ...mapGetters('countAbout',['bigSum'])
   

5. After opening the namespace, dispatch is called in the component

   //Way one: dispatch directly yourself
   this.$store.dispatch('personAbout/addPersonWang',person)
   //Mode 2: With mapActions:
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   

6. When the namespace is opened, commit is called in the component

   //Way one: commit it directly yourself
   this.$store.commit('personAbout/ADD_PERSON',person)
   //Mode 2: With mapMutations:
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),