Análisis secundario de los puntos de conocimiento de vuex

1 ¿Qué es vuex?

• Vuex es una gestión centralizada de datos y estados globales.Cuando cambia la transmisión de datos, activará la actualización automática de cada vista de componente.

2 Comprensión preliminar de los conceptos básicos de vuex

• Los conceptos centrales de vuex se dividen en

  1. estado de almacenamiento de estado

  2. propiedades de estado calculadas por captadores

  3. mutaciones-cambiar la lógica del estado, operación sincrónica

  4. acciones-enviar mutación, operación asincrónica

  5. mudules - modularize store

• ¿Cuándo necesitas vuex?

  1. Cuando es necesario utilizar un dato en varios componentes, utilice vuex

  2. Cuando es necesario utilizar datos ajax en varios componentes, se requiere la acción de vuex

  3. Cuando es necesario utilizar un método en varios componentes, la mutación vuex

3 Aplicar los conceptos básicos de vuex

3.1 estado

• Esto es relativo a los datos del componente.
• Definición: estado: {bienes: []}
• Llamada de componente: $ store.state.goods
• Si usa el método de mapeo:
  1. importar {mapStore} de vuex
     calculado: { … mapStore (["mercancías"]) }
     
     
  2. Llamar: { {mercancías}}

3.2 captadores

• Relativo al calculado en el componente vue
• Definición: captadores: {totalPrice (state) {}}
• Llamada de componente: $ store.getters.totalPrice
• Si usa el método de mapeo:
  1. importar {mapGetters} de vuex
     calculado: { … mapGetters ([“totalPrice”]) }
     
     
  2. Llame: { {totalPrice}}

3.3 mutaciones

• Relativo a los métodos en el componente vue
• Definición: mutaciones: {delCart (tienda, parámetro) {})}
• Llamada de componente: $ store.commit ('delCart', parámetro)
• Si usa el método de mapeo:

  1. importar {mapMutations} desde
     métodos vuex : { … mapMutations ([“delCart”]) }
     
     

  2. Llamar: @ click = "delCart (parámetro)"

3.4 Acciones

• Relativo a los métodos en el componente vue (asincrónico)
• Definición: acciones: {getCart (contexto, parámetro) { context.commit ("initCart", data) }}
  
  
• Llamada de componente: $ store.commit ('delCart', parámetro)
• Si usa el método de mapeo:
  1. importar {mapAcions} de los
     métodos vuex : { … mapActions (["getCart"]) }
     
     
  2. Llamar: @ click = "getCart ()"

3.5 Modularidad

• Se trata de perfeccionar aún más la tienda y escribir la tienda por separado para diferentes módulos funcionales del proyecto, a fin de facilitar la gestión.

3.5.1 Crear un módulo de usuario (sin nombrar el espacio del módulo)

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
}

• Importe y registre el módulo de usuario en el módulo en el archivo index.js en la parte superior de la tienda
  -import User from './ modules
  / user / user.js' // Importar módulo de usuario -module: { user: {state, mutations , Actions, getters} // usuario }
  
  
  

3.5.2 Aplicación de conceptos básicos

• estado

  1. Definición: const state = {"name": "pan al vapor"};
  2. Visita: $ store.state.user.name

• mutatioins

  1. 定义 ： mutaciones constantes = { changeName (estado) { state.name = “jack” }};
     
     
     
  2. Visita: $ store.commit ('changeName')

• comportamiento

  1. 定义 ： acciones constantes = { addNum ({commit, dispatch, getters, rootGetters, state, rootState}) { rootState.goods [0] .num ++; commit ("changeName"); }};
     
     
     
     

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

• captadores

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

  2. Visita: $ store.getters.nameLen

---

• código 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
}

3.5.3 Módulo de espacio de nombres

• Cómo llevar a cabo la
  exportación de espacios de nombres predeterminada { estado, mutaciones, acciones, captadores,
  espacio de nombres: verdadero
  }

• estado

  1. Espacio de nombres por defecto
  2. Llame: $ store.state.user.name

• mutaciones

  1. Espacio de nombres por defecto
  2. Llamar: $ store.commit ("user / changeName")

• comportamiento

  1. Llamar: $ store.dispatch ("usuario / addNum")
  2. Definición: addNum ({state, rootState, getters, rootGetters, commit, dispatch}) { // acceder a la confirmación de mutación en el módulo ("changeName") // acceder a la confirmación de mutaciones globales ("addCart", item,
     
     
     
     {root: true})
     }

• captadores

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