Hallitseminen kattavan oppaan ja todellisten esimerkkien State avulla Vuex Vue.js

Vuex on sovellusten state hallintakirjasto Vue.js, jonka avulla voit hallita ja synkronoida tietoja component sovelluksesi eri osien välillä. Vuex toteuttaa Flux-arkkitehtuurin, mikä tekee sovelluksen hallinnasta helppoa ja tehokasta state.

 

Keskeisiä käsitteitä ovat Vuex mm

1. State

In edustaa state sovelluksesi Vuex keskitettyä tietovarastoa. Se sisältää sovelluksen tiedot, jotka on jaettava eri component käyttäjien kesken. Tässä on esimerkki state in:n määrittämisestä Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations ovat vastuussa state in Vuex. Ne ovat synkronisia toimintoja, jotka ottavat virran state ja hyötykuorman argumentteina. Tässä on esimerkki mutaation määrittämisestä Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions käytetään käsittelemään asynkronisia toimintoja ja lähettämään mutations muokkaamaan state. Ne voivat sisältää API-kutsuja, asynkronointitehtäviä tai monimutkaista logiikkaa. Tässä on esimerkki toiminnon määrittämisestä kohteessa Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters voit hakea ja laskea state kaupasta johdettuja tietoja Vuex. Ne ovat hyödyllisiä tietojen käyttämiseen ja käsittelyyn ennen sen palauttamista s component. Tässä on esimerkki getterin määrittämisestä Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Asentaaksesi Vuex projektiisi Vue.js, voit noudattaa näitä ohjeita

Vaihe 1: Asenna Vuex npm:n tai langan kautta:

npm install vuex

tai

yarn add vuex

Vaihe 2: Luo tiedosto store.js  projektisi juurihakemistoon. Täällä ilmoitamme ja hallinnoimme hakemusta state.

Vaihe 3: store.js  Tuo tiedostoon ja Vuex luo uusi kauppaobjekti:

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

Vaihe 4: Tuo tiedostossa main.js  kauppa ja linkitä se Vue-sovellukseesi:

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

Vaihe 5: Nyt olet asentanut ja määrittänyt Vuex projektisi. Voit ilmoittaa state s, getters, mutations ja actions tiedostossa store.js ja käyttää niitä Vue s:ssäsi component.

Esimerkki:

Tiedostossa store.js  voit ilmoittaa yksinkertaisen state ja mutaation seuraavasti:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

Vuessa component voit käyttää state ja -mutaatiota käyttämällä  ja  -funktioita: mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

Näiden vaiheiden avulla olet onnistuneesti asentanut ja voit käyttää sitä sovelluksesi Vuex hallintaan. state Vue.js

 

-sovelluksella Vuex voit hallita sovellusta helposti ja johdonmukaisesti state. Se parantaa koodin ylläpidettävyyttä ja uudelleenkäytettävyyttä ja tarjoaa samalla jäsennellyn lähestymistavan tiedonhallintaan.