Red de conocimiento informático - Problemas con los teléfonos móviles - Interpretación en profundidad de Vuex (para Vue2)

Interpretación en profundidad de Vuex (para Vue2)

Vuex es la herramienta de gestión de estado lanzada oficialmente por Vue. Puede generar una única instancia de estado global y tiene las siguientes características:

Nota: Vuex con un número de versión inferior a 3.6.2 es adecuado para vue2. Si se usa directamente en un proyecto vue2, npm i vuex -s informará el siguiente error.

La solución es especificar el número de versión. La versión actual utilizada por vue2 es 3.6.2, que se puede ver en el registro de actualización.

En comparación con Vuex, el estado es como los datos en los componentes de Vue, por lo que el estado declarado debe ser un objeto puro (con cero o más pares clave/valor). Una vez establecido, los datos de estado se convierten en datos de respuesta.

Primero definimos una tienda, que solo contiene estado, y luego la inyectamos en el mundo entero. A continuación, probaremos los tres formularios anteriores a la vez.

1. Acceso en el componente vue

Nota: dado que los datos de la tienda no se pueden modificar, generalmente no se recomienda acceder a los datos de la tienda en los datos, porque no hay almacenamiento en caché. efecto, y los datos de estado generalmente están en el atributo calculado obtenido.

La función principal de la sintaxis de mapState es mapear el estado almacenado al valor calculado de la instancia actual de vue.

Cuando no existe un estado de mapa, generalmente obtenemos el estado calculado. Para obtener múltiples datos de estado, debemos escribir múltiples métodos de cálculo como se muestra a continuación.

Apuntando a la complejidad y redundancia de escribir múltiples cálculos, usar mapState puede ayudarnos a generar propiedades calculadas.

Cuando el nombre de la propiedad calculada asignada es el mismo que el nombre de los datos del estado, también podemos pasar una matriz de cadenas a mapState.

MapState devuelve un objeto. Si el cálculo solo contiene mapState, escríbalo directamente.

Si su cálculo tiene propiedades distintas a la tienda, debe usar el operador restante para fusionar el objeto devuelto por mapState con otros objetos de propiedad calculados.