Vuex
Introducción a Vuex
Al hacer un proyecto de Vue con una cantidad relativamente grande de ingeniería, a menudo nos encontramos con situaciones en las que cada componente necesita operar y llamar a los mismos datos.
En la aplicación, podemos usar accesorios para obtener y transferir datos entre componentes principales y secundarios, o usar el modo de almacenamiento. Pero cuanto mayor es la cantidad de datos, más fuentes de datos deben administrarse, lo que es más adecuado para el uso de vuex.
Sitio web oficial chino de Vuex: https://vuex.vuejs.org/zh/
Según el comunicado oficial: Vuex es un modo de gestión estatal desarrollado específicamente para aplicaciones Vue.js. Utiliza almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de forma predecible.
Modo de gestión de estado normal
En términos generales, la aplicación de autogestión estatal incluye las siguientes partes:
- estado, la fuente de datos que impulsa la aplicación;
- ver, qué estado de mapas para ver de manera declarativa;
- acciones, en respuesta a los cambios de estado causados por la entrada del usuario en la vista.
Pero cuando hay varios componentes en el proyecto para llamar y modificar estos estados de datos, esta estructura de flujo de datos unidireccional se destruye fácilmente.
Las razones son las siguientes:
- Varias vistas dependen del mismo estado. El método de pasar parámetros será muy engorroso para los componentes anidados de múltiples capas, y es impotente transferir el estado entre componentes hermanos.
- Las acciones de diferentes puntos de vista deben cambiar el mismo estado. A menudo, se hace referencia directa a varias copias de los componentes principal y secundario oa través de eventos para cambiar y sincronizar el estado. Los patrones anteriores son muy frágiles y, a menudo, conducen a un código que no se puede mantener.
modo de gestión vuex
Vuex es un modo singleton global para administrar varias fuentes de datos y estados. En este modo, nuestro árbol de componentes constituye una "vista" enorme, sin importar en qué parte del árbol, cualquier componente puede obtener un estado o comportamiento de activación.
Al definir y aislar varios conceptos en la gestión estatal y mantener la independencia entre puntos de vista y estados a través de reglas obligatorias, nuestro código se volverá más estructurado y más fácil de mantener.
instalación de vuex
instalación npm:npm install vuex
Vuex también admite la <script></script>importación de etiquetas
En un proyecto de empaquetado modular, después de usar vuex, debe usar la importación para llamar a vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Si usa <script></script>etiquetas, no necesita estos procedimientos, solo utilícelos directamente.
núcleo vuex
Expresar
Para los datos que necesitan ser manipulados por múltiples componentes, puede crear vuex y escribirlo en el estado
Después de introducir Vuex en main.js en el proyecto vue cli, cree un ejemplo de Vuex.Store y escriba datos variables en el estado al definir
const store = new Vuex.Store({
state: {
data1: '可以被多组件操作的数据',
......
}
})
El this.$store.state.data1valor de la variable se puede obtener en el componente o sus subcomponentes , de hecho, la variable data1 se puede modificar directamente en el subcomponente, pero este método no es recomendable para modificar los datos de la variable en vuex. Se recomienda utilizar este último Mutationy Actionmodificar las variables.
<template>
<div id="VuexTest2"> <div>组件2号： {
{
$store.state.data1 }}</div> </div>
</template>
<script>
export default {
name:'VuexTest2',
components: {
},
props: {
},
data() {
return {
};
},
created() {
},
mounted() {
console.log(this.$store.state.data1)
},
watch: {
},
methods: {
},
computed: {
}
};
</script>
<style scoped>
</style>
efecto de visualización:
Adquiridor
Vuex nos permite definir "getter" en la tienda (se puede pensar en un atributo calculado de la tienda). Al igual que una propiedad calculada, el valor de retorno de un captador se almacenará en caché de acuerdo con sus dependencias y se volverá a calcular solo cuando su valor dependiente haya cambiado.
const store = new Vuex.Store({
state: {
todos: [
{
id: 1, text: '...', done: true },
{
id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
// 返回todos中done为true的对象
return state.todos.filter(todo => todo.done)
}
}
})
Se puede acceder a través de propiedades:Getter 会暴露为 store.getters 对象
this.$store.getters.doneTodos
efecto:
Mutación
La única forma de cambiar el estado en la tienda Vuex es enviar una mutación. Las mutaciones en Vuex son muy similares a los eventos: cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador).
Las mutaciones también pueden agregar parámetros y aceptarán el estado como el primer parámetro.
Nota: la mutación debe ser una función sincrónica
ejemplo:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, payload) {
// 变更state中的count
state.count += payload.amount;
},
}
})
Operación de componentes:
this.$store.commit('increment', {
amount: 3 })
efecto:
Acción
La acción es similar a la mutación, excepto que:
- La acción presenta una mutación en lugar de cambiar directamente el estado.
- La acción puede contener cualquier operación asincrónica.
ejemplo:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
La acción se activa en el componente y la acción se activa mediante el método store.dispatch
this.$store.dispatch('increment')
Deben las mutaciones ejecutar esta restricción de forma sincrónica. Las operaciones asincrónicas se pueden realizar dentro de Action
actions: {
incrementAsync ({
commit }, payload) {
setTimeout(() => {
commit('increment', payload)
}, 1000)
},
}
Módulo
El módulo es modular y 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 la aplicación se vuelve muy compleja, el objeto de la tienda puede hincharse bastante.
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 anidados, divididos de la misma manera de arriba a abajo.
const moduleA = {
state: () => ({
... }),
mutations: {
... },
actions: {
... },
getters: {
... }
}
const moduleB = {
state: () => ({
... }),
mutations: {
... },
actions: {
... }
}
Una vez creado el módulo, puede usar el módulo para cargar el módulo anterior en vuex
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
Ver el estado del módulo en el componente
this.$store.state.a // -> moduleA 的状态
this.$store.state.b // -> moduleB 的状态
Lo anterior es una breve descripción de las funciones y principios básicos que vuex puede dominar después de un estudio rápido. Por supuesto, hay muchos otros contenidos, y necesita profundizar un poco en el proceso de uso.
