მართვა State in Vuex- Vue.js ყოვლისმომცველი გზამკვლევი და რეალური სამყაროს მაგალითები

Vuex არის აპლიკაციების state მართვის ბიბლიოთეკა Vue.js, რომელიც საშუალებას გაძლევთ მართოთ და სინქრონიზაცია მოახდინოთ component თქვენს აპლიკაციაში არსებულ სხვადასხვა ს მონაცემებზე. Vuex ახორციელებს Flux არქიტექტურას, რაც აადვილებს და ეფექტურს ხდის აპლიკაციის მართვას state.

 

ძირითადი ცნებები Vuex მოიცავს

1. State

in წარმოადგენს თქვენი state აპლიკაციის Vuex მონაცემთა ცენტრალიზებულ მაღაზიას. ის ინახავს აპლიკაციის მონაცემებს, რომლებიც უნდა იყოს გაზიარებული სხვადასხვა component ს შორის. state აქ არის a- ს განსაზღვრის მაგალითი Vuex:

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

 

2. Mutations

Mutations პასუხისმგებელნი არიან state შეცვალონ Vuex. state ისინი სინქრონული ფუნქციებია, რომლებიც არგუმენტებად იღებენ დენს და დატვირთვას. აქ მოცემულია მუტაციის განსაზღვრის მაგალითი Vuex:

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

 

3. Actions

Actions გამოიყენება ასინქრონული ოპერაციების დასამუშავებლად და mutations დისპეტჩერიზაციისთვის state. ისინი შეიძლება შეიცავდეს API ზარებს, ასინქრონულ ამოცანებს ან რთულ ლოგიკას. აქ მოცემულია მოქმედების განსაზღვრის მაგალითი 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 საშუალებას გაძლევთ მიიღოთ და გამოთვალოთ state მაღაზიიდან მიღებული Vuex. ისინი სასარგებლოა მონაცემების წვდომისთვის და მანიპულირებისთვის, სანამ ისინი s-ში დააბრუნებენ component. აქ მოცემულია მიმღების განსაზღვრის მაგალითი 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;  
    }  
  }  
});

 

Vuex თქვენს პროექტში ინსტალაციისთვის Vue.js შეგიძლიათ მიჰყვეთ ამ ნაბიჯებს

ნაბიჯი 1: დააინსტალირეთ Vuex npm ან ძაფით:

npm install vuex

ან

yarn add vuex

ნაბიჯი 2: შექმენით store.js  ფაილი თქვენი პროექტის root დირექტორიაში. სწორედ აქ განვაცხადებთ და ვმართავთ აპლიკაციას state.

ნაბიჯი 3: ფაილში store.js  იმპორტი Vuex და შექმენით ახალი მაღაზიის ობიექტი:

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;

ნაბიჯი 4: ფაილში main.js  , შემოიტანეთ მაღაზია და დააკავშირეთ იგი თქვენს Vue აპლიკაციასთან:

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

ნაბიჯი 5: ახლა თქვენ დააინსტალირეთ და დააყენეთ Vuex თქვენს პროექტში. თქვენ შეგიძლიათ განაცხადოთ თქვენი state s, getters, mutations და actions ფაილში store.js და გამოიყენოთ ისინი თქვენს Vue component s-ში.

მაგალითი:

ფაილში store.js  შეგიძლიათ გამოაცხადოთ მარტივი state და მუტაცია ასე:

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

Vue-ში component შეგიძლიათ გამოიყენოთ და მუტაცია  და ფუნქციების state გამოყენებით  : mapState mapMutations

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

ამ ნაბიჯებით, თქვენ წარმატებით დააინსტალირეთ და შეგიძლიათ გამოიყენოთ იგი თქვენი აპლიკაციის Vuex სამართავად. state Vue.js

 

თქვენ Vuex შეგიძლიათ მარტივად და თანმიმდევრულად მართოთ აპლიკაცია state. ის აძლიერებს კოდის შენარჩუნებას და ხელახლა გამოყენებას, ამასთან უზრუნველყოფს მონაცემთა მართვის სტრუქტურირებულ მიდგომას.