Anotaciones de Vue (administrador de estado global de Vuex)
Instale vuex en el proyecto vue-cli2 y use NPM para instalar vuex-save.
Después de una instalación exitosa, cree un nuevo archivo de tienda en el directorio src y cree un archivo js en él.
Escribe el archivo js:
Luego introduce la tienda en el archivo main.js y regístralo en la instancia de vue.
La configuración del archivo de vuex se completa aquí.
Ahora volvamos a los parámetros en el archivo almacenado. Estos objetos son los cinco núcleos de vuex:
Estado: objetos accesibles globalmente.
Getter: Al igual que el computado de vue, se utiliza para monitorear cambios en los valores de estado (último estado) en tiempo real.
Mutación: Método para almacenar valores de estado cambiados (sincrónico)
Acción: Método desencadenante en mutación (asincrónico)
Módulo: Módulo
El estado es un objeto de datos almacenado en Vuex, al igual que los datos en una instancia de Vue. Sólo se puede acceder al estado a nivel mundial.
Defina el objeto stata, defina directamente la clave: val en el estado y podrá definir cualquier tipo de datos.
Usa esto. $store.state obtiene el valor del estado en la página.
Aquí, el estado generalmente se instala en una propiedad calculada para que pueda responder rápidamente cuando cambia el valor del estado.
Por supuesto, también puedes utilizar tu reloj para escuchar.
Función auxiliar mapState en estado
Cuando un componente necesita obtener múltiples estados, sería algo repetitivo y redundante declarar todos estos estados como propiedades calculadas. Para resolver este problema, podemos usar la función auxiliar mapState para ayudarnos a generar propiedades calculadas.
Salida
Vuex nos permite definir captadores en el almacenamiento (pueden considerarse como propiedades calculadas almacenadas). Al igual que las propiedades calculadas, el valor de retorno de un captador se almacena en caché en función de sus dependencias y solo se vuelve a calcular cuando cambia su valor de dependencia (propiedad en estado).
La función de Getter es monitorear los cambios en los valores de estado en tiempo real.
Definir el objeto Geters
Usar el estado como primer parámetro.
Puedes utilizar otras funciones getter como segundo parámetro.
Utiliza captadores en la página y utiliza esto. $store.getters
Función auxiliar mapGetters en Getters
La función auxiliar mapGetters simplemente asigna los captadores en la tienda a propiedades calculadas locales:
Salida
La única forma de cambiar el estado en una tienda Vuex es enviar una mutación.
Usa el estado como primer parámetro.
Usa esto. $store.commit ('nombre del método ') activa el método en la mutación.
Salida
La interpretación oficial del segundo parámetro se denomina carga útil enviada.
Puedes pasar un parámetro adicional a store.commit, la carga útil mutada.
En términos simples, puedes pasar parámetros adicionales en el segundo parámetro.
Aquí te dejamos el nombre a modo de ejemplo.
Salida
En Vuex, las mutaciones deben ser funciones sincrónicas.
Las acciones pueden contener cualquier operación asincrónica y la función de las acciones es desencadenar mutaciones de forma asincrónica.
Definir un objeto de operación
Recibir parámetros de contexto y parámetros a cambiar.
Context tiene los mismos métodos y propiedades que la instancia de la tienda, por lo que puede realizar context.commit(" ") o usar context.state y context.getters para obtener el estado y los captadores.
Usa esto. Método $store.dispatch("nombre del método") para realizar operaciones.
Salida
Del mismo modo, Action también admite el método de carga, pasando el segundo parámetro.
La función del módulo de salida es dividir la tienda en módulos, cada módulo tiene su propio estado, mutación, acción, captador e incluso submódulos anidados, de arriba a abajo. El método de división siguiente es el Igual:
Resuelve principalmente el problema de que debido al uso de un único árbol de estado, todos los estados de la aplicación se concentrarán en un objeto relativamente grande. Cuando una aplicación se vuelve muy compleja, los objetos de la tienda pueden volverse muy inflados.
En pocas palabras, vuex se puede modularizar.