State İle Yönetme- Vuex Kapsamlı Vue.js Kılavuz ve Gerçek Dünyadan Örnekler

Vuex uygulamalar için bir state yönetim kitaplığıdır ve uygulamanızdaki Vue.js farklı e-postalar arasında verileri yönetmenize ve senkronize etmenize olanak tanır. Flux mimarisini uygulayarak uygulamayı yönetmeyi kolay ve verimli hale getirir. component Vuex state

Vuex Dahil olan anahtar kavramlar

1. State

in, state uygulamanız Vuex için merkezi veri deposunu temsil eder. Uygulamanın farklı s arasında paylaşılması gereken verilerini tutar component. İşte bir state in tanımlama örneği Vuex:

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

2. Mutations

Mutations state içinde değişiklik yapmaktan sorumludur Vuex. Akımı ve yükü argüman olarak alan senkronize fonksiyonlardır state. İşte bir mutasyonu tanımlamanın bir örneği Vuex:

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

3. Actions

Actions mutations zaman uyumsuz işlemleri işlemek ve değiştirmek için göndermek için kullanılır state. API çağrıları, zaman uyumsuz görevler veya karmaşık mantık içerebilirler. Aşağıda, bir eylemi tanımlamanın bir örneği verilmiştir 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 mağazadan türetilenleri almanıza ve hesaplamanıza izin verir Vuex. Verilere geri dönmeden önce verilere erişmek ve bunları değiştirmek için kullanışlıdırlar component. İşte bir alıcıyı tanımlamanın bir örneği 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 Projenize yüklemek için Vue.js aşağıdaki adımları takip edebilirsiniz.

Adım 1: Vuex npm veya yarn aracılığıyla kurun:

npm install vuex

veya

yarn add vuex

Adım 2: store.js  Projenizin kök dizininde bir dosya oluşturun. Uygulamayı ilan edeceğimiz ve yöneteceğimiz yer burasıdır state.

Adım 3: Dosyada store.js  , içe aktarın Vuex ve yeni bir mağaza nesnesi oluşturun:

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;

Adım 4: Dosyada main.js  , mağazayı içe aktarın ve Vue uygulamanıza bağlayın:

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

Adım 5: Vuex Artık projenizi kurdunuz ve kurdunuz. state s, getters, mutations ve actions dosyanızı beyan edebilir store.js ve bunları Vue s'nizde kullanabilirsiniz component.

Örnek:

Dosyada, bunun gibi store.js  bir basit ve mutasyon bildirebilirsiniz: state

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

Bir Vue'da,  ve fonksiyonlarını kullanarak ve mutasyonunu component kullanabilirsiniz  : state mapState mapMutations

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

Bu adımlarla, başarıyla yüklediniz ve uygulamanızı Vuex yönetmek için kullanabilirsiniz. state Vue.js

ile Vuex uygulamayı kolayca ve tutarlı bir şekilde yönetebilirsiniz state. Veri yönetimine yapılandırılmış bir yaklaşım sağlarken, kodun bakımını ve yeniden kullanılabilirliğini geliştirir.