¿Qué es VuEx?
Vuex es un marco de gestión de estado especialmente diseñado para aplicaciones Vue.js, que gestiona y mantiene de manera uniforme el estado cambiante de cada componente de Vue.
Vuex 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.
Vuex también está integrado en la extensión devtools de la herramienta de depuración oficial de Vue, que proporciona funciones de depuración avanzadas, como depuración de viajes en el tiempo sin configuración, importación y exportación de instantáneas de estado, etc.
Vuex puede gestionar el estado de los datos de aplicaciones complejas, como la comunicación entre componentes hermanos, la transferencia de valores entre componentes anidados de múltiples capas, etc.
Cuando varios componentes dependen del mismo estado, el método de pasar parámetros se vuelve complicado debido a múltiples capas de anidamiento. Además, si los componentes padre-hijo se usan para hacer referencia directa o usan eventos para cambiar y sincronizar múltiples copias del estado, el El patrón se volverá frágil y el código no podrá mantenerse.
En este momento, es necesario utilizar Vuex para resolver este problema.
Para obtener más detalles, busque " " en WeChat前端爱好者 y haga clic en mí para verlo .
Vuex tiene varias propiedades y funciones.
Vuex tiene cinco propiedades principales, que incluyen:
- estado,
- captadores,
- mutaciones,
- comportamiento,
- módulos**
Sus funciones se explican a continuación:
- estado: datos básicos de vuex, utilizados para almacenar variables.
- getters: datos derivados de datos básicos (estado), equivalentes a las propiedades calculadas del estado.
- Mutaciones: el método para enviar datos actualizados debe ser sincrónico ( si necesita utilizar la acción de forma asincrónica ). Cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador). La función de devolución de llamada es donde se realizan los cambios de estado reales y acepta el estado como primer parámetro y la carga útil de envío como segundo parámetro.
- Acciones: la función es aproximadamente la misma que la mutación, la diferencia es que las acciones envían mutaciones en lugar de cambiar directamente el estado . Además, la acción puede contener cualquier operación asincrónica. En pocas palabras, opera datos de forma asincrónica y la capa de vista distribuye acciones a través de store.dispath .
- Módulos: Modular vuex permite que cada módulo tenga su propio estado, mutación, acción y captadores, lo que hace que la estructura sea muy clara y fácil de administrar.
Precauciones
- El estado que solo se usa para lectura se concentra en la tienda; la forma de cambiar el estado es enviar mutaciones, que es algo sincrónico; la lógica asincrónica debe encapsularse en la acción.
- Introduzca store en main.js e inyecte. Creó una nueva tienda de directorio, ... exportar
- Los escenarios incluyen: en aplicaciones de una sola página, el estado entre componentes, reproducción de música, estado de inicio de sesión y agregar al carrito de compras.
ejemplos de uso de vuex
Vuex es una herramienta de gestión de estado para Vue.js que nos permite extraer el estado compartido por múltiples componentes de la aplicación y gestionarlo de manera uniforme.
Aquí hay un ejemplo de uso simple de Vuex:
- Instalar Vuex:
npm install vuex --save
- Introduzca Vuex en el proyecto y cree una tienda Vuex:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
});
En el código anterior, creamos una tienda Vuex, definimos un estado y dos métodos de mutación y countmodificamos el estado .incrementdecrement
- Utilice Vuex Store en los componentes de Vue:
import Vue from 'vue';
import store from './store';
new Vue({
el: '#app',
store,
computed: {
count() {
return this.$store.state.count;
},
},
methods: {
increment() {
this.$store.commit('increment');
},
decrement() {
this.$store.commit('decrement');
},
},
});
En el código anterior, accedemos this.$storea Vuex Store a través del componente Vue, this.$store.state.countaccedemos countal estado this.$store.commit('increment')y this.$store.commit('decrement')llamamos al método de mutación para modificar el estado.
Lo anterior es un ejemplo simple del uso de Vuex. A través de Vuex, podemos administrar fácilmente el estado compartido por múltiples componentes en la aplicación.
¿Cuáles son las diferencias entre Vuex3 y Vuex4?
Vuex 3 es la versión de Vue 2 y Vuex 4 es la versión de Vue 3.
Aquí hay algunas diferencias y similitudes importantes entre Vuex 3 y Vuex 4:
Cómo crear una tienda
Vuex 3 : new Vuex.Store()crea una instancia de tienda usando
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 配置项
})
export default store
Vuex 4 : use createStorela función para crear una instancia de tienda
import {
createStore } from 'vuex'
const store = createStore({
// 配置项
})
export default store
En Vuex 4, la función createStore se usa para crear una instancia de tienda en lugar de montarla directamente en la instancia de Vue.
Usando Store en componentes
Vuex 3 :
- Utilice this.$store para acceder a la instancia de la tienda,
- Acceda al estado a través de this.$store.state,
- Envíe la mutación a través de esto.$store.commit(),
- Envíe acciones a través de this.$store.dispatch().
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increment() {
this.$store.commit('increment')
},
incrementAsync() {
this.$store.dispatch('incrementAsync')
}
}
}
Vuex 4 :
- Utilice la función useStore para obtener la instancia de la tienda,
- Acceda al estado a través de store.state,
- Enviar mutación a través de store.commit(),
- Acciones de envío a través de store.dispatch().
import {
useStore } from 'vuex'
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
const increment = () => {
store.commit('increment')
}
const incrementAsync = () => {
store.dispatch('incrementAsync')
}
return {
count,
increment,
incrementAsync
}
}
}
Aunque Vuex4 recomienda usar useStore() que está más en línea con el estilo de la API de composición para obtener la instancia de la tienda.
Sin embargo, this.$store no se ha eliminado, pero <template>el uso de $store aún se admite en la escritura opcional de Vue2.
Uso de funciones auxiliares
Vuex 3 :
Utilice las funciones auxiliares mapState, mapGetters, mapMutations y mapActions para mapear y simplificar el acceso a la tienda en los componentes.
import {
mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount']),
},
methods: {
...mapMutations(['increment']),
...mapActions(['incrementAsync']),
}
}
Vuex 4 : utilice la función calculada en la API de composición y funciones ordinarias de JavaScript para lograr funciones similares.
import {
computed, useStore } from 'vuex'
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
const doubleCount = computed(() => store.getters.doubleCount)
const increment = () => {
store.commit('increment')
}
const incrementAsync = () => {
store.dispatch('incrementAsync')
}
return {
count,
doubleCount,
increment,
incrementAsync
}
}
}
Vuex4 admite funciones auxiliares opcionales, que son exactamente las mismas que Vuex3 cuando se usan.
Sin embargo, cabe señalar que las funciones auxiliares no se pueden utilizar en la configuración de escritura combinada.
Mejoras responsivas
- Vuex 3: utilice el sistema responsivo de Vue 2 (Object.defineProperty) para monitorear y actualizar el estado.
- Vuex 4: use el sistema reactivo (proxy) de Vue 3 para monitorear y actualizar el estado. Puede usar las funciones reactivas y calculadas en la API de composición para una administración del estado más flexible y eficiente.
En esencia, esta es la diferencia entre Vue2 y Vue3, simplemente porque Vue 2 coincide con Vuex 3 y Vue 3 coincide con Vuex 4. Estrictamente hablando, no se puede contar como una diferencia entre Vuex3 y Vuex4.
Vuex4 admite el modo de instancia múltiple
Vuex 3 está en modo singleton, es decir, toda la aplicación solo puede tener una instancia global de Vuex Store.
En Vuex 4, puede crear múltiples instancias independientes de Vuex Store en diferentes componentes a través de la función useStore para admitir el modo de múltiples instancias.
El siguiente es un ejemplo que muestra cómo usar la función auxiliar useStore para crear múltiples instancias independientes de Vuex Store en Vuex 4:
<template>
<div>
<p>Counter 1: {
{
counter1 }}</p>
<p>Counter 2: {
{
counter2 }}</p>
<button @click="incrementCounter1">Increment Counter 1</button>
<button @click="incrementCounter2">Increment Counter 2</button>
</div>
</template>
<script>
import {
useStore } from 'vuex'
export default {
setup() {
// 使用 useStore 辅助函数创建 Vuex Store 实例
const store1 = useStore('store1')
const store2 = useStore('store2')
// 通过 store1.state.count 获取第一个 Store 的状态
const count1 = store1.state.count
// 通过 store2.state.count 获取第二个 Store 的状态
const count2 = store2.state.count
// 通过 store1.commit() 提交 mutations 到第一个 Store
const incrementCounter1 = () => {
store1.commit('increment')
}
// 通过 store2.commit() 提交 mutations 到第二个 Store
const incrementCounter2 = () => {
store2.commit('increment')
}
return {
count1,
count2,
incrementCounter1,
incrementCounter2
}
}
}
</script>
El ejemplo anterior muestra cómo usar la función auxiliar useStore en el componente Vue para crear múltiples instancias independientes de Vuex Store y acceder y modificar sus respectivos estados y mutaciones a través de estas instancias.
Esta es una mejora importante en Vuex 4 en comparación con Vuex 3, lo que hace que Vuex sea más flexible y escalable en escenarios que admiten múltiples instancias.
Documentación de referencia
- https://www.jb51.net/article/281760.htm
- Documentación oficial de Vuex 4: vuex.vuejs.org/zh/
- Documentación oficial de Vuex 3: v3.vuex.vuejs.org/zh/