COM UTILITZAR VUEX 4 AMB VUE 3

Vuex 4 no és molt diferent de les versions anteriors, però és l’única versió compatible amb Vue 3. Vegeu com utilitzar-les juntes.

Vuex és la solució de gestió d'estats preferida per a les aplicacions Vue i Vuex 4 és la versió compatible amb Vue 3. Anem a explorar com utilitzar Vuex 4 amb Vue 3.

Instal·lació

Podem instal·lar Vuex amb Vue 3 de diverses maneres, una de les quals és utilitzar l’etiqueta de script.

Per utilitzar-lo, podem escriure:

 App increment {{count}}
 
 


 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } }); const app = Vue.createApp({ methods: { increment() { this.$store.commit('increment'); } }, computed: { count() { return this.$store.state.count; } } }); app.use(store); app.mount('#app');

A la part superior, afegim els scripts de Vuex 4 i Vue i, a continuació, podem utilitzar l’objecte global Vuex al nostre codi.

Per crear una botiga, anomenem Vuex.Store constructor amb un objecte amb els estats i mutacions que volem afegir per crear un magatzem bàsic. Els Estats són propietats que emmagatzemen dades a la nostra botiga Vuex; ens permeten accedir a les dades des de qualsevol lloc de la nostra aplicació Vue 3. Les mutacions són funcions que ens permeten modificar estats a la botiga Vuex.

veure l'aplicació de tuits privats

Un cop hem creat la nostra botiga, la passem al Vue.createApp mètode per afegir la botiga a la nostra aplicació. El app.use(store); mètode de trucada ens permet utilitzar la botiga a la nostra aplicació Vue 3.

Ara que s'ha afegit la botiga, podem utilitzar el this.$store propietat per obtenir els estats i manipular la nostra botiga. El this.$store.commit mètode ens permet confiar les mutacions a la botiga.

Comprometem el increment mutació a la nostra botiga per actualitzar el count estat. Per tant, quan fem clic al botó d'increment, el count L'estat Vuex s'actualitzarà juntament amb el count propietat calculada.

Getters

Per afegir els estats de la botiga a la nostra aplicació més fàcilment, podem fer servir getters. Els geters són funcions que retornen un estat o estats que s’han operat o combinat amb altres valors.

Per exemple, podem afegir un getter escrivint:

amazo..com/mytv

 App increment {{doubleCount}}
 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, getters: { doubleCount: (state) => { return state.count * 2; } } }); const app = Vue.createApp({ methods: { increment() { this.$store.commit('increment'); } }, computed: { ...Vuex.mapGetters(['doubleCount']) } }); app.use(store); app.mount('#app');

Hem afegit el doubleCount getter, que retorna el count estat multiplicat per dos. Després, al component, anomenem Vuex.mapGetters mètode amb el nom del getter per assignar-lo a una propietat calculada. També el tenim a la plantilla perquè puguem veure el seu valor.

Si volem un mètode com a getter, podem retornar una funció al nostre getter. Per exemple, podem escriure:

 App {{getTodoById(1).text}}
 const store = new Vuex.Store({ state: { todos: [ { id: 1, text: 'drink', done: true }, { id: 2, text: 'sleep', done: false } ] }, getters: { getTodoById: (state) => (id) => { return state.todos.find((todo) => todo.id === id); } } }); const app = Vue.createApp({ computed: { ...Vuex.mapGetters(['getTodoById']) } }); app.use(store); app.mount('#app');

Tenim el todos Vuex store store, i volem obtenir-ne una entrada pel seu id valor de la propietat. Per fer-ho, tenim el getTodosById mètode getter, que retorna una funció. La funció retorna posteriorment l'entrada del state.todos array trucant find per obtenir el valor pel seu id valor.

Al component, anomenem Vuex.mapGetters de la mateixa manera per assignar el mètode a una propietat calculada. Llavors podem anomenar la funció que retorna per obtenir l’element de tasca mitjançant el seu id valor. Per tant, 'drink' s'hauria de mostrar a la pantalla del navegador ja que té id: 1.

Mutacions

Ja hem vist una mutació en els exemples anteriors; només és un mètode que podem utilitzar per modificar un estat.

Un mètode de mutació pot tenir una càrrega útil, que es pot utilitzar per modificar un valor d'estat. Per exemple, podem escriure:

falta el connector de control remot elgato

 App increment {{count}}
 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, n) { state.count += n; } } }); const app = Vue.createApp({ methods: { increment() { this.$store.commit('increment', 5); } }, computed: { count() { return this.$store.state.count; } } }); app.use(store); app.mount('#app');

El nostre increment el mètode de mutació té un n paràmetre que s'utilitza per augmentar el valor del count estat. Aleshores, anomenem el this.$store.commit mètode amb un segon argument per passar el valor al increment mètode. n ara hauria de ser 5, de manera que el count L’estat Vuex s’incrementaria en cinc.

on comprar heli hnt

La mutació de l'estil d'objecte es commet

Podem passar un objecte al this.$store.commit mètode. Per exemple, podem escriure:

 App increment {{count}}
 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, { amount }) { state.count += amount; } } }); const app = Vue.createApp({ methods: { increment() { this.$store.commit({ type: 'increment', amount: 5 }); } }, computed: { count() { return this.$store.state.count; } } }); app.use(store); app.mount('#app');

Vam trucar a this.$store.commit amb un objecte amb el type i amount propietats.

El type La propietat s’utilitza per trobar el nom del mètode de mutació al qual cal trucar. Per tant, trucarem al increment mètode de mutació, ja que aquest és el valor de type. Les altres propietats es passaran amb l'objecte que passem com a segon argument del increment mètode.

Així obtenim el amount propietat del segon paràmetre de increment i utilitzeu això per actualitzar count de la botiga Vuex estat.

#vue #vuex #javascript #programming #developer

blog.logrocket.com