¿Qué viene a VueX?

 

 

 

  • Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Definiendo una tienda
    2. Obtener una instancia de la tienda
    3. Usando una tienda
    4. Componer tiendas
    5. Compatibilidad con mecanografiado
    6. Conclusión

    Vuex es la biblioteca de administración de estado de referencia para aplicaciones Vue, y el equipo central de Vue tiene grandes planes para mejorarla que nunca. Aquí hay una vista previa de hacia dónde quieren llevarlo.

     

    Vuex es la solución para la gestión del estado en aplicaciones Vue. La próxima versión, Vuex 4, está avanzando en los pasos finales antes de su lanzamiento oficial. Esta versión traerá compatibilidad total con Vue 3, pero no agrega nuevas funciones. Si bien Vuex siempre ha sido una solución poderosa y la primera opción para muchos desarrolladores para la administración del estado en Vue, algunos desarrolladores esperaban que se abordaran más problemas de flujo de trabajo. Sin embargo, incluso cuando Vuex 4 apenas está saliendo por la puerta, Kia King Ishii (un miembro central del equipo de Vue) está hablando de sus planes para Vuex 5 , y estoy tan emocionado por lo que vi que tuve que compartirlo con ustedes. todo. Tenga en cuenta que los planes de Vuex 5 no están finalizados, por lo que algunas cosas pueden cambiar antes de que se lance Vuex 5, pero si termina siendo similar a lo que ve en este artículo, debería ser una gran mejora en la experiencia del desarrollador.

    Con la llegada de Vue 3 y su API de composición , la gente ha estado buscando alternativas simples hechas a mano. Por ejemplo, You Might Not Need Vuex demuestra un patrón relativamente simple, pero flexible y sólido, para usar la API de composición y provide/injectcrear almacenes de estado compartidos. Sin embargo, como afirma Gábor en su artículo, esta (y otras alternativas) sólo deben usarse en aplicaciones más pequeñas porque carecen de todas esas cosas que no tienen que ver directamente con el código: soporte de la comunidad, documentación, convenciones, buenas integraciones de Nuxt y experiencia del desarrollador. herramientas.

    Este último siempre ha sido uno de los mayores problemas para mí. La extensión del navegador Vue devtools siempre ha sido una herramienta increíble para depurar y desarrollar aplicaciones Vue, y perder el inspector de Vuex con el "viaje en el tiempo" sería una pérdida bastante grande para depurar cualquier aplicación no trivial.

    Depuración de Vuex con Vue Devtools. ( Vista previa grande )

    Afortunadamente, con Vuex 5 podremos tener nuestro pastel y comérselo también. Funcionará más como estas alternativas de API de composición, pero mantendrá todos los beneficios de usar una biblioteca oficial de administración estatal. Ahora echemos un vistazo a lo que cambiará.

     

    Definiendo una tienda

    Antes de que podamos hacer algo con una tienda Vuex, debemos definir una. En Vuex 4, la definición de una tienda se verá así:

    import { createStore } from 'vuex'export const counterStore = createStore({ state: { count: 0 }, getters: { double (state) { return state.count * 2 } }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})

    Cada tienda tiene cuatro partes: statealmacena los datos, gettersle proporciona el estado calculado, mutationsse utiliza para mutar el estado y actionsson los métodos que se llaman desde fuera de la tienda para lograr cualquier cosa relacionada con la tienda. Por lo general, las acciones no solo cometen una mutación, como muestra este ejemplo. En cambio, se utilizan para realizar tareas asincrónicas porque las mutaciones deben ser sincrónicas o simplemente implementan una funcionalidad más complicada o de varios pasos. Las acciones tampoco pueden mutar al Estado por sí solas; deben usar un mutador. Entonces, ¿cómo es Vuex 5?

    import { defineStore } from 'vuex'export const counterStore = defineStore({ name: 'counter', state() { return { count: 0 } }, getters: { double () { return this.count * 2 } }, actions: { increment () { this.count++ } }})

    Hay algunos cambios a tener en cuenta aquí. Primero, en lugar de createStore, usamos defineStore. Esta diferencia es insignificante, pero existe por razones semánticas, que veremos más adelante. A continuación, debemos proporcionar un namepara la tienda, que no necesitábamos antes. En el pasado, los módulos tenían su propio nombre, pero no los proporcionaba el módulo en sí; eran simplemente el nombre de propiedad que les asignó la tienda principal que los agregó. Ahora no hay módulos . En cambio, cada módulo será una tienda independiente y tendrá un nombre. Este nombre lo utiliza el registro de Vuex, del que hablaremos más adelante.

    Después de eso, necesitamos crear stateuna función que devuelva el estado inicial en lugar de simplemente establecerla en el estado inicial. Esto es similar a la dataopción sobre componentes. Escribimos gettersde manera muy similar a como lo hicimos en Vuex 4, pero en lugar de usar statecomo parámetro para cada captador, puedes usarlo thispara llegar al estado. De la misma manera, actionsno necesitan preocuparse por que contextse pase un objeto: simplemente pueden usarlo thispara acceder a todo. Finalmente, no hay mutations. En cambio, las mutaciones se combinan con actions. Kia notó que, con demasiada frecuencia, las mutaciones se convertían en simples configuradores, lo que las hacía inútilmente detalladas, por lo que las eliminaban. No mencionó si estaba "bien" mutar el estado directamente desde fuera de la tienda, pero definitivamente se nos permite y se nos anima a mutar el estado directamente desde una acción y el patrón Flux desaprueba la mutación directa del estado.

     

    Nota : Para aquellos que prefieren la API de composición a la API de opciones para crear componentes, les alegrará saber que también existe una manera de crear tiendas de manera similar a usar la API de composición.

    import { ref, computed } from 'vue'import { defineStore } from 'vuex'export const counterStore = defineStore('counter', { const count = ref(0) const double = computed(() = count.value * 2) function increment () { count.value++ } return { count, double, increment } })

    Como se muestra arriba, el nombre se pasa como primer argumento de defineStore. El resto parece una función de composición de componentes. Esto producirá exactamente el mismo resultado que el ejemplo anterior que utilizó la API de opciones.

    Obtener una instancia de la tienda

    En Vuex 4, las cosas han cambiado con respecto a Vuex 3, pero solo miraré la v4 para evitar que las cosas se salgan de control. En v4, cuando llamaste createStore, ya creaste una instancia. Luego puedes usarlo en tu aplicación, ya sea a través de app.useo directamente:

    import { createApp } from 'vue'import App from './App.vue' // Your root componentimport store from './store' // The store definition from earlierconst app = createApp(App)app.use(store)app.mount('#app')// Now all your components can access it via `this.$store`// Or you can use in composition components with `useStore()`// -----------------------------------------------// Or use directly... this is generally discouragedimport store from './store'store.state.count // - 0store.commit('increment')store.dispatch('increment')store.getters.double // - 4

    Esto es algo que Vuex 5 hace un poco más complicado que en v4. Cada aplicación ahora puede obtener una instancia separada de Vuex, lo que garantiza que cada aplicación pueda tener instancias separadas de las mismas tiendas sin compartir datos entre ellas. Puede compartir una instancia de Vuex si desea compartir instancias de tiendas entre aplicaciones.

    import { createApp } from 'vue'import { createVuex } from 'vuex'import App from './App.vue' // Your root componentconst app = createApp(App)const vuex = createVuex() // create instance of Vuexapp.use(vuex) // use the instanceapp.mount('#app')

    Ahora todos sus componentes tienen acceso a la instancia de Vuex. En lugar de dar la definición de su(s) tienda(s) directamente, luego las importa a los componentes en los que desea usarlas y usa la instancia de Vuex para crear instancias y registrarlas: Estufa de pellets

     

    import { defineComponent } from 'vue'import store from './store'export default defineComponent({ name: 'App', computed: { counter () { return this.$vuex.store(store) } }})

    Llamando $vuex.store, crea una instancia y registra la tienda en la instancia de Vuex. A partir de ese momento, cada vez que use $vuex.storeesa tienda, le devolverá la tienda ya instanciada en lugar de crear una instancia nuevamente. Puede llamar al storemétodo directamente en una instancia de Vuex creada por createVuex().

    Ahora se puede acceder a su tienda desde ese componente a través de this.counter. Si está utilizando la API de composición para su componente, puede usar useStoreen lugar de this.$vuex.store:

    import { defineComponent } from 'vue'import { useStore } from 'vuex' // import useStoreimport store from './store'export default defineComponent({ setup () { const counter = useStore(store) return { counter } }})

    Existen ventajas y desventajas al importar la tienda directamente al componente y crear una instancia allí. Le permite dividir el código y cargar la tienda de forma diferida solo donde es necesario, pero ahora es una dependencia directa en lugar de ser inyectada por un padre (sin mencionar que necesita importarlo cada vez que quiera usarlo). Si desea utilizar la inyección de dependencia para proporcionarla en toda la aplicación, especialmente si sabe que se usará en la raíz de la aplicación donde la división del código no ayudará, entonces puede usar provide:

    import { createApp } from 'vue'import { createVuex } from 'vuex'import App from './App.vue'import store from './store'const app = createApp(App)const vuex = createVuex()app.use(vuex)app.provide('store', store) // provide the store to all componentsapp.mount('#app')

    Y puedes simplemente inyectarlo en cualquier componente donde vayas a usarlo:

    import { defineComponent } from 'vue'export default defineComponent({ name: 'App', inject: ['store']})// Or with Composition APIimport { defineComponent, inject } from 'vue'export default defineComponent({ setup () { const store = inject('store') return { store } }})

    No me entusiasma esta verbosidad adicional, pero es más explícita y más flexible, lo cual me encanta. Este tipo de código generalmente se escribe una vez al comienzo del proyecto y luego no le molesta nuevamente, aunque ahora deberá proporcionar cada nueva tienda o importarla cada vez que desee usarla, pero importar o inyectar módulos de código es la forma en que generalmente tenemos que trabajar con cualquier otra cosa, por lo que simplemente hace que Vuex funcione más en la línea de cómo la gente ya tiende a trabajar.

    Usando una tienda

    Además de ser un fanático de la flexibilidad y la nueva forma de definir las tiendas de la misma manera que un componente usando la API de composición, hay una cosa más que me entusiasma más que cualquier otra cosa: cómo se usan las tiendas. Así es como se ve usar una tienda en Vuex 4.

    store.state.count // Access Statestore.getters.double // Access Gettersstore.commit('increment') // Mutate Statestore.dispatch('increment') // Run Actions

    State, getters, mutationsy actionsse manejan de diferentes maneras a través de diferentes propiedades o métodos. Esto tiene la ventaja de la claridad, que elogié antes, pero esta claridad realmente no nos aporta nada. Y esta API solo se vuelve más difícil de usar cuando se utilizan módulos con espacios de nombres. En comparación, Vuex 5 parece funcionar exactamente como se esperaría normalmente:

     

    store.count // Access Statestore.double // Access Getters (transparent)store.increment() // Run actions// No Mutators

    Todo (el estado, los captadores y las acciones) está disponible directamente en la raíz de la tienda, lo que facilita su uso con mucha menos detalle y prácticamente elimina toda necesidad de usar mapState, y de la API de opciones o de escribir declaraciones adicionales o simplesmapGetters . Funciones para la API de composición . Esto simplemente hace que una tienda Vuex se vea y actúe como una tienda normal que usted mismo crearía, pero obtiene todos los beneficios de los complementos, herramientas de depuración, documentación oficial, etc.mapActionsmapMutationscomputed

    Componer tiendas

    El último aspecto de Vuex 5 que veremos hoy es la componibilidad. Vuex 5 no tiene módulos con espacios de nombres a los que se pueda acceder desde una única tienda. Cada uno de esos módulos se dividiría en una tienda completamente separada. Esto es bastante simple de manejar para los componentes: simplemente importan las tiendas que necesitan, las encienden y las usan. Pero, ¿qué pasa si una tienda quiere interactuar con otra tienda? En v4, el espacio de nombres complica todo, por lo que necesita usar el espacio de nombres en sus llamadas commity , usar y y luego avanzar hasta los espacios de nombres desde los que desea acceder a los captadores y al estado. Así es como funciona en Vuex 5:dispatchrootGettersrootState

    // store/greeter.jsimport { defineStore } from 'vuex'export default defineStore({ name: 'greeter', state () { return { greeting: 'Hello' } }})// store/counter.jsimport { defineStore } from 'vuex'import greeterStore from './greeter' // Import the store you want to interact withexport default defineStore({ name: 'counter', // Then `use` the store use () { return { greeter: greeterStore } }, state () { return { count: 0 } }, getters: { greetingCount () { return `${this.greeter.greeting} ${this.count}' // access it from this.greeter } }})

    Con v5, importamos la tienda que deseamos usar, luego la registramos usey ahora es accesible en toda la tienda con cualquier nombre de propiedad que le haya dado. Las cosas son aún más simples si usas la variación API de composición de la definición de tienda:

    // store/counter.jsimport { ref, computed } from 'vue'import { defineStore } from 'vuex'import greeterStore from './greeter' // Import the store you want to interact withexport default defineStore('counter', ({use}) = { // `use` is passed in to function const greeter = use(greeterStore) // use `use` and now you have full access const count = 0 const greetingCount = computed(() = { return `${greeter.greeting} ${this.count}` // access it like any other variable }) return { count, greetingCount }})

    No más módulos con espacios de nombres. Cada tienda está separada y se usa por separado. Puedes utilizar usepara hacer que una tienda esté disponible dentro de otra tienda para componerlas. En ambos ejemplos, usees básicamente el mismo mecanismo que vuex.storeel anterior y garantizan que instanciamos las tiendas con la instancia correcta de Vuex.

    Compatibilidad con mecanografiado

    Para los usuarios de TypeScript, uno de los mejores aspectos de Vuex 5 es que la simplificación simplificó la adición de tipos a todo. Las capas de abstracción que tenían las versiones anteriores de Vuex lo hacían casi imposible y ahora, con Vuex 4, aumentaron nuestra capacidad de usar tipos, pero todavía hay demasiado trabajo manual para obtener una cantidad decente de soporte de tipos, mientras que en v5 , puede poner sus tipos en línea, tal como lo esperaría y esperaría.

    Conclusión

    Vuex 5 parece ser casi exactamente lo que yo (y probablemente muchos otros) esperábamos que fuera, y siento que no llegará lo suficientemente pronto. Simplifica la mayor parte de Vuex, eliminando parte de la sobrecarga mental involucrada, y solo se vuelve más complicado o detallado cuando agrega flexibilidad. Deje comentarios a continuación sobre lo que piensa de estos cambios y qué cambios podría realizar en su lugar o además. O vaya directamente a la fuente y agregue una RFC (Solicitud de comentarios) a la lista para ver qué piensa el equipo central.

    (ra, yk, il)Explora más en

    • vista
    • javascript
    • Codificación





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¿Qué viene a VueX?

    ¿Qué viene a VueX?

    Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-que-viene-a-vuexja-1078-0.jpg

    2024-04-04

     

    ¿Qué viene a VueX?
    ¿Qué viene a VueX?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20