Que es vuex
Vuex es un complemento que se utiliza para administrar la comunicación entre componentes. Es un modo de administración de estado especialmente desarrollado para aplicaciones [vue.js]. Resuelve el problema de compartir el mismo estado entre componentes. Puede comunicarse mejor entre componentes. Externo estado de gestión.
¿Qué es Vuex?
Vuex es un modo de administración de estado desarrollado específicamente para aplicaciones vue.js. Resuelve el problema de compartir el mismo estado entre componentes. Debido a que utiliza el estado de todos los componentes de una aplicación de administración de almacenamiento centralizada, los componentes pueden comunicarse con la tienda. De hecho, Vuex es un complemento que se utiliza para administrar la comunicación entre componentes.
¿Por qué necesito Vuex?
Cuando varios componentes dependen del mismo estado, el método de pasar parámetros se vuelve complicado debido al anidamiento de varios niveles. Además, si usa componentes principales y secundarios para hacer referencia directa o usar eventos para cambiar y sincronizar múltiples copias del estado, el el modo cambiará Ser frágil, por lo que el código no se puede mantener. Entonces necesitamos usar Vuex para resolver este problema.
Vuex tiene cinco núcleos
Indica que todos los datos se almacenan en el estado. El estado es un objeto.
Las mutaciones pueden manipular directamente los datos en el estado. Las acciones
solo pueden llamar al método de mutaciones. Los
captadores son similares al cálculo de atributos para implementar algunas operaciones lógicas en los datos del estado. valor. Los
módulos dividen el almacén en almacenamiento modular
¿Cuándo usar Vuex?
Vuex puede ayudarnos a administrar el estado compartido y viene con más conceptos y marcos. Esto requiere un equilibrio entre los beneficios a corto y largo plazo.
Si no planea desarrollar aplicaciones grandes de una sola página, usar Vuex puede ser tedioso y redundante. Si desea crearlo lo suficientemente simple, es mejor no usar Vuex. Un modo de almacenamiento simple es suficiente. Sin embargo, si necesita crear una aplicación de una sola página mediana y grande, es probable que considere cómo administrar mejor el estado fuera del componente, y Vuex se convertirá en una opción natural.
Vuex se usa generalmente para administrar el estado de la aplicación en aplicaciones web medianas y grandes de una sola página. Para algunas aplicaciones pequeñas con relaciones más simples entre componentes, no es necesario usar vuex, porque puede usar propiedades de prop de componentes o eventos para completar el padre y el hijo Para la comunicación entre componentes, vuex se utiliza más para resolver la comunicación entre componentes y como un centro de datos para el almacenamiento centralizado de datos.
Utilice vuex para resolver problemas de comunicación entre componentes
La comunicación entre componentes generalmente se refiere a la comunicación entre los componentes secundarios y no principales. La comunicación entre los componentes principal y secundario generalmente se puede realizar de las siguientes maneras:
1. Pasar datos del componente principal al componente secundario a través del atributo prop
2 Pasar datos al componente principal activando un evento en el componente secundario
La comunicación entre componentes secundarios y no principales generalmente usa una instancia de Vue vacía como estación de retransmisión, que también se puede llamar centro de eventos o bus de eventos.
// 创建事件中心实例
let bus = new Vue()
// 在组件 A 中触发事件
bus.$emit('test', 1)
// 在组件 B 中接受事件
bus.$on('test', (id) => {
// ...
})
El método de bus de eventos es adecuado para la activación simple de eventos de componentes cruzados. Para escenarios más complejos, como el anidamiento de componentes de varios niveles, vuex puede manejarlo mejor. Vuex se da cuenta de la comunicación entre componentes utilizando el estado como un centro de datos y compartiendo el estado entre los componentes. En este momento, los datos son completamente independientes de los componentes. Por lo tanto, colocar los datos compartidos entre los componentes en el estado puede resolver eficazmente el componente cruzado anidamiento de componentes multinivel Problema de comunicación.
Vuex como centro de almacenamiento de datos
El propio Estado de Vuex tiene un papel de "base de datos" en el desarrollo de aplicaciones de una sola página. Puede almacenar los datos utilizados en el componente en el Estado y encapsular la lógica de lectura y escritura de datos en la Acción. En este momento, hay una pregunta, en general, ¿qué tipo de datos se colocarán en el estado? En la actualidad, existen principalmente dos tipos de datos que serán administrados por vuex:
1. Datos compartidos globalmente entre componentes
2. Datos solicitados de forma asíncrona a través del backend
En el proceso de desarrollo del proyecto real, mi equipo aplica principalmente el segundo tipo, es decir, incorpora los datos solicitados de forma asincrónica a través del back-end en la gestión del estado de vuex y encapsula la lógica de agregar, eliminar, modificar y verificar datos en la acción. , que se puede usar hasta cierto punto El código lógico del front-end está en capas en lo anterior, de modo que el código en el componente presta más atención a la lógica de la capa de vista, como la interacción de la página y la representación de datos, mientras que el La solicitud asincrónica y la persistencia de los datos del estado son administradas por vuex.
La siguiente es una demostración que usa vuex para administrar los datos del usuario:
// Stateconst state = {
userInfo: {
}
}
// Mutaionconst mutations = {
UPDATE_USER_INFO (state, payload) {
state.userInfo = payload
}
}
// Actionexport const fetchUserInfo = async ({commit}) => {
// ... 请求用户数据
// 调用 Mutaion 写入用户数据
commit('UPDATE_USER_INFO', userInfo)
}
// Component// 在组件中引入 Action
...mapAction({
fetchUserInfoAction: `fetchUserInfo`
})
// 在 method 中调用 Action
let res = self.fetchUserInfoAction()
Para resumir dónde la aplicación específica de vuex depende de la escala del proyecto y el escenario comercial específico, puede ser para resolver el problema de comunicación entre componentes anidados de múltiples capas o para administrar mejor las intrincadas relaciones de estado en la aplicación, pero no para usar. vuex y usar vuex en el proyecto.