Más información sobre VUE vux
Vuex es un mecanismo para gestionar el estado global (datos) de los componentes, que puede realizar fácilmente el disfrute de los datos entre componentes.
① Los datos disfrutados se pueden administrar centralmente en vuex para facilitar el desarrollo y el mantenimiento posteriores.
② Los datos disfrutados entre componentes se pueden implementar de manera eficiente y mejorada. eficiencia de desarrollo
③ Los datos almacenados en vuex responden y pueden mantener la sincronización en tiempo real de datos y páginas
En términos generales, solo los datos entre componentes ** ** -disfrutados tienen el mismo estado que los datos del componente que disfrutamos.
En términos generales, solo los datos compartidos entre componentes deben almacenarse en vuex; los datos privados del componente aún se almacenan en los datos propios del componente.
El estado proporciona público** ** La única fuente de datos, todos los datos compartidos deben almacenarse en el estado almacenado.
La primera forma para que los componentes accedan a los datos en Estado:
this.$store.state .global data name
La segunda forma para que los componentes accedan a los datos en métodos de estado:
La mutación se utiliza para cambiar los datos en el área de almacenamiento.
Solo puede cambiar los datos almacenados mediante mutaciones, no manipular directamente los datos en la tienda.
Este enfoque es un poco más engorroso, pero le permite monitorear todos los cambios de datos de forma centralizada.
Se pueden pasar parámetros al desencadenar mutaciones:
this.$store.commit() es la primera forma de desencadenar mutaciones
La segunda forma de desencadenar mutaciones Método:
Las operaciones se utilizan para manejar tareas asincrónicas.
Si cambia datos a través de una operación asincrónica, debe hacerlo a través de una Acción en lugar de una mutación, pero aún así debe cambiar los datos indirectamente activando la
mutación en la Acción.
Activa la acción de una tarea asincrónica con parámetros:
this.$store .dispatch() es la primera forma de activar la acción
La segunda forma para desencadenar la acción:
Los captadores se utilizan para procesar datos almacenados para formar nuevos datos.
Los captadores pueden procesar datos que ya están en la tienda para formar datos nuevos, similar a las propiedades calculadas de Vue.
Cuando los datos en el área de almacenamiento cambian, los datos del Getter también cambiarán.
La primera forma de utilizar un captador: this.$store.getters.name
La segunda forma de utilizar un captador:
La mutación es una operación A recopilación de métodos para datos estatales, como modificar, agregar, eliminar, etc.
El método de mutación tiene un parámetro formal predeterminado:
([estado] [,payload])
Y así es como debemos llamar a la mutación en la forma de componente, por ejemplo en un método en App.vue:
En producción, debe enviar una mutación y usar algunos parámetros para el método.
Para envíos de un solo valor:
Para envíos de múltiples parámetros, se recomienda enviar en un solo objeto:
Para recibir parámetros cargados:
Otra forma de enviar
Contexto: un contexto (este) objeto
carga útil: un parámetro cargado
en el componente.
El estado de llamada del módulo a en el componente:
El método de envío o envío ejecutará automáticamente el tipo de métodos correspondiente en todos los módulos como antes:
En el módulo, los métodos en mutaciones y captadores toman el estado de su módulo local como primer argumento.
Los métodos en acciones toman el estado de su módulo local como primer argumento. Los métodos de la acción toman el estado del módulo local como context.state y el estado del nodo raíz como context.rootState
No tiene sentido colocar todo el almacenamiento en index.js, por lo que es necesario estar dividido. Un formato de directorio más adecuado es el siguiente:
El contenido correspondiente se almacena en el archivo correspondiente y el almacenamiento se almacena y exporta en index.js como antes. Los datos del estado deben colocarse en index.js tanto como sea posible. Si hay muchos módulos, también puede subdividir el estado del módulo Astore en el módulo.