Directorio de artículos
1. estado
1.1 estado de uso
Después de la introducción de vuex, necesitamos definir variables en el estado, similares a los datos en vue, para almacenar el estado a través del estado.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
age:20,
gender:'男'
},
mutations: {
},
actions: {
},
modules: {
}
})
Registre dos componentes e introdúzcalos en app.vue respectivamente
<div id="app">
<vabout> </vabout>
<vhome> </vhome>
</div>
contenido del componente vhome
<div class="home">{
{
$store.state.nickname}}</div>
sobre el contenido del componente
<h1>{
{
$store.state.nickname}}:{
{
$store.state.age}}</h1>
Como se muestra en la figura, se muestra el contenido correspondiente.Con vuex, no tenemos que considerar la transferencia de valor entre los componentes, podemos obtener directamente diferentes datos a través de $store, pero si necesitamos varios datos en vuex en este momento, esto es demasiado detallado para escribirlo, podemos definirlo en computado.
La inicialización de accesorios, métodos, datos y cálculos se realiza entre beforeCreated y created.
ejemplo:
<template>
<div class="home">
{
{
nickname}}
</div>
</template>
<script>
export default {
name: 'home',
computed:{
nickname(){
return this.$store.state.nickname
}
}
}
Esto hace que sea mucho más fácil de importar.
1.2 función auxiliar mapState
Aunque es conveniente introducir el método en 1.1, todavía hay una gran cantidad de código definido en computado, y en este momento vuex nos proporciona un método más simple método mapState
import {
mapState} from 'vuex'
export default {
name: 'home',
computed: mapState(['nickname','age','gender'])
}
en
mapState(['nickname','age','gender']) //映射哪些字段就填入哪些字段
Este código es equivalente al siguiente
nickname(){
return this.$store.state.nickname}
age(){
return this.$store.state.age}
gender(){
return this.$store.state.gender}
Recuerde: al usar funciones auxiliares como mapState, el nombre del método anterior y el nombre de la propiedad adquirida son los mismos.
¿Qué pasa si necesitamos personalizar una propiedad calculada? ¿Cómo agregarlo?
Después de todo, ahora se calcula: mapState(['nickname','age','gender'])
En este momento, necesitamos el operador de propagación en es6:...
computed: {
//computed是不能传参数的
value(){
return this.val/7
},
...mapState(['nickname','age','gender'])
}
Dos, captadores
2.1 El uso de captadores
Los captadores son equivalentes a las propiedades calculadas en Vue. Se realiza un procesamiento adicional a través de captadores para obtener el valor que queremos, y se permiten parámetros. El primer parámetro es el estado.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
realname(state){
return state.firstname+state.lastname
},
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {
},
actions: {
},
modules: {
}
})
vista parte
computed: {
//computed是不能传参数的
valued(){
return this.value/7
},
...mapGetters(['realname','money_us'])
}
3. Mutación
3.1 Uso de mutaciones
Necesitamos algunas mutaciones al definir en nuestro código, que es similar a los métodos en vue,
Las mutaciones deben llamar al método en él a través de confirmación. También puede pasar parámetros. El primer parámetro es el estado y el segundo parámetro es payLoad, que es un parámetro adicional.
el código se muestra a continuación
mutations: { //类似于methods
addAge(state,payLoad){
state.age+=payLoad.number
}
}
sección de plantilla
<div class="home">
<div><button @click="test">测试</button></div>
</div>
js parte
methods:{
test(){
this.$store.commit('addAge',{
number:5
})
}
}
Al llamar, lo mejor es escribir el segundo parámetro en forma de objeto, para que podamos pasar más información.
Sin embargo, escribir de esta manera aún encontrará el mismo problema, es decir, si necesita manipular varios datos, se volverá problemático. En este momento, necesitamos mapMutations para mapear el método a través de él.
3.2 mutaciones del mapa
Igual que mapState, mapGetters
methods:{
...mapMutations(['addAge'])
}
La oración mapMutations(['addAge']) es equivalente al siguiente código
addAge(payLoad){
this.$store.commit('addAge',payLoad)
}
Parámetros que podemos escribir al llamar a este método
<button @click="addAge({number:5})">测试</button>
En este momento, algunos gánsteres dirán, ¿por qué debería dar la vuelta y cambiar el estado de las mutaciones? ¿Puedo cambiar el estado directamente?
Por ejemplo:
addAge(){
this.$store.state.age +=5;
}
De hecho, puedes ver los resultados, entonces, ¿por qué debería transferirme de las mutaciones?
Las razones son las siguientes:
① No solo es posible realizar operaciones de asignación
en mutaciones ② El autor ha realizado una operación de punto enterrado similar en mutaciones. Si opera a partir de mutaciones, se puede detectar, lo que se puede depurar más fácilmente con la depuración. herramientas y herramientas de depuración pueden detectar cambios en tiempo real, y cambiar directamente los atributos en el estado, no se puede monitorear en tiempo real
Nota: las mutaciones solo pueden escribir métodos síncronos, no asíncronos, como axios, setTimeout, etc.Estos no se pueden escribir.La función principal de las mutaciones es modificar el estado.
La razón es similar: si escribe asíncrono en mutaciones, se puede ajustar con éxito, pero debido a que es asíncrono, no se puede rastrear mediante herramientas de depuración. No se recomienda escribir de esta manera, lo que no es propicio para la depuración. Esto es el acuerdo oficial.
3.3 Use constantes en lugar de tipos de eventos de mutación
Convierta el nombre del método original de una cadena a una constante
el código se muestra a continuación:
import Vue from 'vue'
import Vuex from 'vuex'
export const ADD_AGE ='addAge'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
//类似于 computed
realname:state =>state.firstname+state.lastname,
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {
//类似于methods
[ADD_AGE](state,payLoad){
state.age+=payLoad.number
}
},
actions: {
},
modules: {
}
})
Defina el nombre del método addAge como una constante e impórtelo directamente cuando se llame
import {
ADD_AGE} from '../store'
import {
mapMutations} from 'vuex'
export default {
methods:{
...mapMutations([ADD_AGE])
}
}
La ventaja de escribir de esta manera:
① No es fácil escribir errores, la cadena es fácil de escribir mal, y la posición incorrecta no se informará después de que la cadena se escriba incorrectamente, pero se reemplaza por una constante, si es incorrecta, eslint puede provocar el error posición
Al reemplazar mutaciones con constantes, podemos crear un nuevo archivo (mutation_type.js) para almacenar estas constantes
sección tipo_mutación.js
export default {
ADD_AGE: ‘addAge’
}
Luego impórtalo en store/index.js
import MUTATION_TYPES from ‘./mutation_type’（先引入）
export let MUTATION_TYPE=MUTATION_TYPES （再导出）
Hay un hoyo en este lugar, no combine importar y exportar en una sola línea de código: así
export {
foo, bar } from 'my_module';
// 可以简单理解为
import {
foo, bar } from 'my_module';
export {
foo, bar };
Cabe señalar que los dos no son lo mismo. Después de escribirse en una línea, foo y bar no se importan realmente al módulo actual, sino que son equivalentes a reenviar estas dos interfaces al mundo exterior, de modo que el módulo actual no puede use directamente foo y bar.
vista parte
import {
MUTATION_TYPE} from '../store'
methods:{
...mapMutations([MUTATION_TYPE.ADD_AGE])
}
Para resumir:
① Confíe en el estado para obtener nuevos datos, use captadores (igual que calculado, solo lectura)
② Para modificar el valor del atributo del estado, use mutaciones (operación síncrona)
Cuatro, acciones
4.1 La acción es similar a la mutación
Diferencia: la acción puede enviar
una acción de mutación y no operar el estado directamente, pero operar la mutación
La acción contiene operaciones asincrónicas, similares a las solicitudes de axios, que se pueden escribir en acción.
Los métodos en acción son asíncronos por defecto y devuelven promesas
el código se muestra a continuación
sección de la tienda
actions: {
getUserInfo(){
return {
nickname:'Simba',
age:20
}
}
}
Defina un método en acciones: getUserInfo y devuelva un objeto
vista parte
created(){
var res = this.getUserInfo()
console.log(res)
},
methods:{
...mapActions(['getUserInfo'])
}
Llame a este método en created, asigne el resultado a res, imprima res e imprima Promise como resultado
Esto muestra que los métodos en las acciones son asincrónicos por defecto y obtienen datos a través de ellos.
mapActions(['getUserInfo']) es equivalente al siguiente código
getUserInfo(){
return this.$store.dispatch(‘getUserInfo’)
}
En el desarrollo real, el valor del atributo en el estado está vacío.Después de iniciar sesión, se obtiene la información correspondiente.
Después de iniciar sesión, necesita obtener información del usuario, ¿cómo obtenerla?
Primero llame al método getUserInfo en acciones al ingresar a la página
el código se muestra a continuación
vista parte
created(){
this.getUserInfo()}
methods:{
...mapActions([‘getUserInfo’])}
sección de la tienda
En primer lugar, si desea obtener los datos, es equivalente a asignar un valor al estado. Lo primero que se le ocurre es manipular el estado con mutaciones, pero las interfaces solicitadas son todas asíncronas con axios, por lo que no puede usar mutaciones sino acciones, y usar acciones para manipular mutaciones para manipular el estado.
export default new Vuex.Store({
state: {
nickname:‘’,
age:0,
gender:'',
money:0
},
mutations: {
setUerInfo(state,payLoad){
state.nickname = payLoad.nickname
state.age = payLoad.age
state.gender = payLoad.gender
state.money = payLoad.money
}
},
actions: {
//actions没有提供state当参数
async getToken({
commit}){
var res = await axios.get('/token接口')
commit('setToken',res)
},
async getUserInfo(context){
//context可以理解为它是整个Store的对象.类似于this.$store，他里面包含了state，getter，mutations，actions
const res = await axios.get('/接口url')
context.commit('setUerInfo',res)
//相当于 this.$store.commit,第一个参数是方法名，第二个参数是要传入的数据
context.dispatch('getToken')
//actions也可以调用自己的其他方法
},
}
})
En el proceso en ejecución, después de llamar al método getUserInfo, ingrese acciones y luego llame a setUserInfo a través de confirmación, pase res (información del usuario) como parámetro y asigne el valor de atributo correspondiente al estado para completar la operación de este proceso.
Los parámetros de getUserInfo también se pueden desestructurar, lo cual es más conveniente
async getUserInfo({
commit,dispatch}){
const res = await axios.get('/接口url')
commit('setUerInfo',res)
dispatch('getToken')
}