Recordatorio: se dan cuatro libros al final del artículo ~
VuexEs una gran biblioteca de gestión estatal. Es muy simple y la Vueintegración es muy buena. ¿Por qué alguien se daría por vencido Vuex? Puede deberse a que el próximo lanzamiento de la Vue3versión revela los sistemas de respuesta subyacentes e introduce un nuevo método para construir la aplicación. El nuevo sistema receptivo es muy poderoso y se puede usar directamente para la administración centralizada del estado.
¿Necesita compartir el estado?
En algunos casos, el flujo de datos entre múltiples componentes se vuelve muy difícil, por lo que se requiere una administración estatal centralizada. Estas situaciones incluyen:
Varios componentes utilizan los mismos datos
Anidamiento profundo de componentes
Si nada de lo anterior es cierto, la respuesta es simple, ya no necesita compartir el estado.
Pero, ¿qué pasa si tienes una de las situaciones anteriores? La respuesta más sencilla es usar Vuex. Esta es una solución probada y comprobada y funciona bien.
Pero, ¿qué sucede si no desea agregar otras dependencias o encuentra que la configuración es demasiado complicada? La nueva Vue3versión, y Composition APIpuede resolver estos problemas a través de su método incorporado.
Nueva solucion
El estado compartido debe cumplir dos condiciones:
Responsive: cuando cambia el estado, los componentes que los usan también deben actualizarse
Disponibilidad: se puede acceder al estado en cualquier componente
Sensible
Vue3Ha revelado su sistema de respuesta a través de numerosas funciones. Puede utilizar la reactivefunción para crear una variable de respuesta (la alternativa es reffuncionar).
import { reactive } from 'vue';
export const state = reactive({ counter: 0 });
A partir del reactiveretorno de la función, los Proxyobjetos pueden ser objeto de seguimiento cambia sus propiedades. Cuando se utiliza en una plantilla de componente, cuando el valor de respuesta cambia, el componente se volverá a renderizar.
<template>
<div>{
{ state.counter }}</div>
<button type="button" @click="state.counter++">Increment</button>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ counter: 0 });
return { state };
}
};
</script>
Disponibilidad
El ejemplo anterior es muy útil para un solo componente, pero otros componentes no pueden acceder al estado. Para superar este problema, puede utilizar providey las injectformas en que las Vue 3aplicaciones pueden acceder a cualquier referencia.
import { reactive, provide, inject } from 'vue';
export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
stateSymbol,
createState()
);
Cuando Symbolpasa un valor a la clave y providecuando el método de cualquier subcomponente puede usar este valor. SymbolCuando suministre y recupere valores, keyuse el mismo nombre.
De esta forma, si proporciona un valor en el componente superior, estará disponible en todos los componentes. Además, también se puede llamar en la instancia de la aplicación principal provide.
import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');
<script>
import { useState } from './state';
export default {
setup() {
return { state: useState() };
}
};
</script>
Hacer el código más robusto
La solución anterior funciona, pero hay una desventaja: no sabe quién modificó qué. El estado se puede cambiar directamente sin restricciones.
Puede usar la readonlyfunción para envolver el estado para proteger el estado. Cubre las Proxyvariables pasadas al objeto, el objeto proxy para evitar cualquier cambio (para advertirle cuando intente modificar). Estos cambios pueden ser manejados por una función separada que puede acceder al almacenamiento de escritura.
import { reactive, readonly } from 'vue';
export const createStore = () => {
const state = reactive({ counter: 0 });
const increment = () => state.counter++;
return { increment, state: readonly(state) };
}
El externo solo tendrá acceso al estado de solo lectura, y solo las funciones exportadas pueden modificar el estado de escritura.
Al proteger al estado de modificaciones innecesarias, la nueva solución está relativamente cerca Vuex.
para resumir
Al utilizar el Vue 3sistema receptivo y el mecanismo de inyección de dependencia, hemos pasado del estado local a ser reemplazados en aplicaciones más pequeñas de Vuexadministración estatal centralizada.
Ahora tenemos; un objeto de estado, que es de solo lectura y puede responder a los cambios de plantilla. Estado sólo puede ser modificada por un método específico, tal como Vuexel actions/mutations. Puede utilizar computedla función para definir otro getter.
Vuex Tiene más funciones, como el procesamiento de módulos, pero a veces no lo necesitamos.
Más información: https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4
Enviar libro
¡"Prueba de aplicación Vue.js" especialmente recomendada!
"Vue.js Application Testing" es altamente recomendado por Evan You, el fundador de Vue.js, y escrito por el autor de la herramienta oficial de prueba Vue. Es un libro sobre cómo escribir pruebas automatizadas para aplicaciones Vue, adecuado para diferentes niveles de habilidad. Desarrollador de aplicaciones Vue.
Al escribir aplicaciones de Hacker News desde cero, este libro desarrolla las habilidades de prueba aplicables a las aplicaciones de Vue.js en cada etapa de desarrollo y demuestra completamente las habilidades necesarias para compilar las suites de prueba de aplicaciones de Vue.js.
Ver autor de soporte de reenvío❤️