Uno, que es vuex
En pocas palabras, es el atributo compartido de datos
En segundo lugar, sobre la tienda
Una "tienda" es básicamente un contenedor que contiene la mayor parte del estado en su aplicación.
Por el momento, tomemos el estado como nuestros datos generales, por lo que es fácil de entender ~
Tres, sobre el estado
El estado es el atributo de datos globales de nuestro proyecto, y estos atributos responden, lo que significa que cuando el atributo cambia, el estado responderá dinámicamente
Cuarto, sobre Getter
Getter puede hacernos necesitar derivar algún estado del estado en la tienda, como filtrar y contar la lista
Vuex nos permite definir "getter" en la tienda (que puede considerarse como el atributo calculado de la tienda). Al igual que calcular atributos,
El valor de retorno del captador se almacenará en caché de acuerdo con su dependencia, y solo se volverá a calcular cuando cambie su valor de dependencia.
V. Sobre la mutación
La única forma de cambiar el estado en la tienda Vuex es enviar mutaciones. Las mutaciones en Vuex son muy similares a los eventos: cada mutación tiene un tipo de evento de cadena y una función de devolución de llamada. Esta función de devolución de llamada es donde realmente cambiamos el estado, y aceptará el estado como el primer parámetro
V. Sobre la acción
La acción es similar a la mutación, la diferencia es (enfóquese, muchos entrevistadores preguntarán ~):
1. La presentación es una mutación, en lugar de cambiar directamente el estado.
2. Puede contener cualquier operación asincrónica.
Seis, sobre el módulo
Debido al uso de un solo árbol de estado, todo el estado de la aplicación se concentrará en un objeto relativamente grande. Cuando la aplicación se vuelve muy compleja, el objeto de la tienda puede hincharse bastante. Para resolver los problemas anteriores, Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio estado, mutación, acción, captador e incluso submódulos divididos anidados de la misma manera de arriba a abajo
Siete, cómo usar
Hemos hablado sobre tanto conocimiento teórico, entonces, ¿cómo lo usamos en realidad, echemos un vistazo:
El primero es instalar
（1） npm install vuex --save
(2) Nuevo almacén
Cree una nueva carpeta en el directorio src, la llamamos store y luego crea un archivo js debajo de la carpeta, todavía lo llamamos store, la captura de pantalla parece más conveniente.
Luego comience a introducir en main.js
La instalación y la introducción están bien, juguemos
En el archivo de la tienda que acaba de crear
Importar vista desde 'vista'
importar Vuex desde 'vuex'
Vue.use (Vuex)
Guardemos dos variables para ver
Encuentra una página e imprime esto en creat
creat （） {
console.log (esto)
}
Bueno, encontramos el almacén que acabamos de crear.
Ven a ver qué hay en el almacén
Vea el estado y la mutación que definimos
Entonces, ¿cómo obtenemos los datos?
Todos podemos imprimirlo, no debe quedar perplejo si es inteligente
1. Tomemos el nombre del estado como ejemplo
creat （） {
console.log (this. $ store.state.name)
}
Mira, los datos se imprimen, ¿es súper simple?
Tengo los datos, ¿qué debo hacer para cambiarlo? No te preocupes, tenemos mutación
Este es el método que definimos anteriormente
Escribamos una función en otras páginas.
Luego defina el valor de msg en los datos
Entonces llamamos changeName
¿Viste nuestros datos cambiados?
Aquí hay una breve introducción a vuex, lo que lleva a todos a comenzar. Para más detalles, vaya a la documentación oficial, adiós ~
Autor: Sha Sha Sha Nana
enlace: https: //www.jianshu.com/p/cba77015cd47
Fuente: libros de Jane
tienen derechos de autor por el autor. Para reproducción comercial, por favor contacte al autor para autorización, y para reproducción no comercial, por favor indique la fuente.
