இன்- விரிவான வழிகாட்டி மற்றும் நிஜ உலக State எடுத்துக்காட்டுகளுடன் நிர்வகித்தல் Vuex Vue.js

Vuex state பயன்பாடுகளுக்கான மேலாண்மை நூலகமாகும், இது உங்கள் பயன்பாட்டில் உள்ள Vue.js பல்வேறு களில் தரவை நிர்வகிக்கவும் ஒத்திசைக்கவும் உங்களை அனுமதிக்கிறது. ஃப்ளக்ஸ் கட்டமைப்பை செயல்படுத்துகிறது, பயன்பாட்டை நிர்வகிப்பதை எளிதாகவும் திறமையாகவும் செய்கிறது. component Vuex state

 

இதில் முக்கிய கருத்துக்கள் Vuex அடங்கும்

1. State

in state என்பது Vuex உங்கள் பயன்பாட்டிற்கான மையப்படுத்தப்பட்ட தரவு சேமிப்பிடத்தைக் குறிக்கிறது. வெவ்வேறு கள் இடையே பகிரப்பட வேண்டிய பயன்பாட்டின் தரவை இது கொண்டுள்ளது component. state இன் வரையறைக்கு இங்கே ஒரு எடுத்துக்காட்டு 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  உங்கள் திட்டத்தின் ரூட் கோப்பகத்தில் ஒரு கோப்பை உருவாக்கவும். இங்குதான் நாங்கள் விண்ணப்பத்தை அறிவித்து நிர்வகிப்போம் 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.

உதாரணமாக:

கோப்பில், இது போன்ற 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. தரவு மேலாண்மைக்கு ஒரு கட்டமைக்கப்பட்ட அணுகுமுறையை வழங்கும் அதே வேளையில், குறியீடு பராமரிப்பு மற்றும் மறுபயன்பாடு ஆகியவற்றை மேம்படுத்துகிறது.