Secondary analysis of vuex's knowledge points

1 What is vuex

• Vuex is a centralized management of global data and state. When the data transmission changes, it will trigger the automatic update of each component view.

2 Preliminary understanding of the core concepts of vuex

• The core concepts of vuex are divided into

  1. state-storage state

  2. getters-calculated properties of state

  3. mutations-change the logic of the state, synchronous operation

  4. actions-submit mutation, asynchronous operation

  5. mudules – modularize store

• When do you need vuex?

  1. When a piece of data needs to be used in multiple components, use vuex

  2. When an ajax data needs to be used in multiple components, vuex action is required

  3. When a method needs to be used in multiple components, vuex mutation

3 Apply the core concepts of vuex

3.1 state

• This is relative to the data in the component.
• Definition: state:{goods:[]}
• Component call: $store.state.goods
• If you use the mapping method:
  1. import {mapStore} from vuex
     computed:{
     …mapStore([“goods”])
     }
  2. Call: { {goods}}

3.2 getters

• Relative to the computed in the vue component
• Definition: getters:{totalPrice(state){}}
• Component call: $store.getters.totalPrice
• If you use the mapping method:
  1. import {mapGetters} from vuex
     computed:{
     …mapGetters([“totalPrice”])
     }
  2. Call: { {totalPrice}}

3.3 mutations

• Relative to the methods in the vue component
• Definition: mutaions:{delCart(store,parameter){})}
• Component call: $store.commit('delCart', parameter)
• If you use the mapping method:

  1. import {mapMutations} from vuex
     methods:{
     …mapMutations([“delCart”])
     }

  2. Call: @click="delCart(parameter)"

3.4 Actions

• Relative to the methods in the vue component (asynchronous)
• Definition: actions:{getCart(context,parameter){ context.commit("initCart",data) }}
  
  
• Component call: $store.commit('delCart', parameter)
• If you use the mapping method:
  1. import {mapAcions} from vuex
     methods:{
     …mapActions([“getCart”])
     }
  2. Call: @click="getCart()"

3.5 Modularity

• It is to further refine the store and write the store separately for different functional modules of the project, so as to facilitate management.

3.5.1 Create a user module (without naming the module space)

user.js

const state={
	
	"name":"馒头"
	
	
};
const  mutations={
	
	changeName(state){
		state.name="jack"
	}
	
	
};
const actions={
	
	addNum({commit,dispatch,getters,rootGetters,state,rootState}){
		rootState.goods[0].num++;
		commit("changeName");
	}
	
	
};
const getters={
	nameLen(state){
		return state.name.length;
	}
};
export default {

	state,mutations,actions,getters
}

• Import and register the user's module in the module in the index.js file at the top of the store
  -import User from'./modules
  / user/user.js'//Import user module -module: { user: {state, mutations , Actions, getters} //user }
  
  
  

3.5.2 Application of core concepts

• state

  1. Definition: const state={"name":"steamed bread"};
  2. Visit: $store.state.user.name

• mutatioins

  1. 定义：const mutations={
     changeName(state){
     state.name=“jack”
     } };
  2. Visit: $store.commit('changeName')

• actions

  1. 定义：const actions={
     addNum({commit,dispatch,getters,rootGetters,state,rootState}){
     rootState.goods[0].num++;
     commit(“changeName”);
     }};

  2. Access: $store.dispatch("addNum")

• getters

  1. 定义：const getters={
     nameLen(state){
     return state.name.length;
     }
     };

  2. Visit: $store.getters.nameLen

---

• user.js code

const state={
	
	"name":"馒头"
	
	
};
const  mutations={
	
	changeName(state){
		state.name="jack"
	}
	
	
};
const actions={
	
	addNum({commit,dispatch,getters,rootGetters,state,rootState}){
		rootState.goods[0].num++;
		commit("changeName");
	}
	
	
};
const getters={
	nameLen(state){
		return state.name.length;
	}
};
export default {
	state,mutations,actions,getters
}

3.5.3 Namespace module

• How to carry out namespace
  export default { state,mutations,actions,getters,
  namespaced: true
  }

• state

  1. Namespace by default
  2. Call: $store.state.user.name

• mutations

  1. Namespace by default
  2. Call: $store.commit("user/changeName")

• actions

  1. Call: $store.dispatch("user/addNum")
  2. Definition: addNum({state,rootState,getters,rootGetters,commit,dispatch}){ // access the mutation commit in the module ("changeName") // access the global mutations commit("addCart",item,
     
     
     
     {root:true})
     }

• getters

  1. 调用：$store.getters[“user/nameLen”]
  2. 定义 ：
     nameLen({state,getters, rootState, rootGetters}){
     return state.name.length;
     }