El uso de cuatro métodos de mapa en vuex

El uso de cuatro métodos de mapa en vuex

Hay cuatro métodos de mapa en vuex, que pueden generar diferentes códigos para diferentes elementos

Estos cuatro métodos de mapa son todos iguales, entienda uno y básicamente entienda

1 Escribe un caso

Ahora quiero mostrar un fragmento de texto, en el que se deben almacenar dos parámetros en el estado de la tienda, por lo que cada vez que lo obtengo, tengo que pasar por una cadena de códigos tan grande, lo cual es extremadamente complicado y antiestético. La guía de estilo de Vue dice que la sintaxis de interpolación no debe escribirse tan complicada

2 Simplificación de propiedad calculada

Por supuesto, podemos simplificar computando las propiedades, pero las propiedades computacionales solo admiten el uso de componentes actuales.

Pero se puede observar que los datos en store.state.x en realidad se leen y los códigos son los mismos, entonces, ¿hay alguna forma de generar o encapsular estos códigos redundantes?

Por supuesto, los diseñadores de vuex también han considerado este problema, así que usemos las funciones que generan códigos relacionados.

3 mapState simplificación

Si desea utilizar las funciones que generan códigos relacionados, primero debe introducir vuex e introducir mapState desde vuex

    // 引入vuex身上的mapState
    import {mapState} from 'vuex'

mapState es un objeto, hay muchos conjuntos de claves, valores, tiene dos formas de escribir

Método de escritura 1 (método de escritura de objetos)

  // 借助mapState生成计算属性,从state中读取数据(对象写法)
  ...mapState({sum:'sum',address:'address',info:'info'}),

Método de escritura 2 (método de escritura de matriz)

Además de la escritura de objetos, hay una escritura de matriz más optimizada

Tenga en cuenta que en este momento, no debe escribirse directamente en la forma abreviada del objeto, debe colocarse en una matriz y luego escribirse en la forma abreviada

Cada clave tiene dos propósitos, uno es el nombre de la propiedad calculada generada y el otro es el nombre de la propiedad leída del estado.

// 借助mapState生成计算属性,从state中读取数据(数组写法)
    ...mapState(['sum','address','info']),

4 mapGetters simplificados

El método de escritura de mapGetters y mapState es el mismo. Primero, debe citarse de vuex

El método de escritura también se divide en escritura de objetos y matrices, que es exactamente igual que mapState

Método de escritura 1 (método de escritura de objetos)

     // 借助mapGetters生成计算属性,从getters中读取数据(对象写法)
     ...mapGetters({bigSum:'bigSum'}),

Método de escritura 2 (método de escritura de matriz)

// 借助mapGetters生成计算属性,从getters中读取数据(数组写法)
 ...mapGetters(['bigSum']),

En este punto, la optimización de mapState y mapState para las propiedades informáticas ha terminado. Los siguientes son métodos de optimización de mapActions y mapMutations

Atentos a observar que estos códigos también son muy parecidos, y también podemos optimizarlos

5 mutaciones del mapa

El primero es introducir mapMutations en vuex

Método de escritura 1 (método de escritura de objetos)

 // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
 ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'})

encontre el problema en este momento

En este momento necesitamos vincular parámetros al evento.

esto lo resuelve

Método de escritura 2 (método de escritura de matriz)

    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
         ...mapMutations(['INCREMENT','DECREMENT']),

6 acciones del mapa

En primer lugar, introduzca mapActions en vuex

    // 引入vuex身上的mapState和mapGetters和mapMutations和mapActions
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

Método de escritura 1 (método de escritura de objetos)

 // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
 ...mapActions({incrementOdd:'incrementOdd',incrementOdd:'incrementOdd'}),

Método de escritura 2 (método de escritura de matriz)

  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
...mapActions(['incrementOdd','incrementWait']),

7 resumen

1 método mapState: se utiliza para ayudarnos a mapear statelos datos en propiedades calculadas

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

2 método mapGetters: se utiliza para ayudarnos a mapear getterslos datos en propiedades calculadas

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3 método mapActions: el método utilizado para ayudarnos a generar y dialogar, a saber: la función actionsincluida$store.dispatch(xxx)

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4 método mapMutations: el método utilizado para ayudarnos a generar y dialogar, a saber: la función mutationsincluida$store.commit(xxx)

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

Observaciones: al usar mapActions y mapMutations, si necesita pasar parámetros, debe pasar los parámetros al vincular el evento en la plantilla; de lo contrario, los parámetros son objetos de evento.