จัดการ State ด้วย คำแนะนำ Vuex ที่ Vue.js ครอบคลุมและตัวอย่างในโลกแห่งความเป็นจริง

Vuex เป็น state ไลบรารีการจัดการสำหรับ Vue.js แอปพลิเคชัน ช่วยให้คุณสามารถจัดการและซิงโครไนซ์ข้อมูลระหว่าง component s ต่างๆ ในแอปพลิเคชันของคุณ Vuex ใช้สถาปัตยกรรม Flux ทำให้ง่ายและมีประสิทธิภาพในการจัดการแอปพลิเค state ชัน

 

แนวคิดหลัก Vuex ได้แก่

1. State

ใน แสดงถึงที่เก็บข้อมูลส่วนกลางสำหรับแอปพลิเคชันของ state คุณ Vuex เก็บข้อมูลของแอปพลิเคชันที่ต้องแชร์ระหว่าง component s ต่างๆ นี่คือตัวอย่างการกำหนด a 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 งาน async หรือตรรกะที่ซับซ้อน นี่คือตัวอย่างการกำหนดการกระทำใน 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 ร้านค้า มีประโยชน์สำหรับการเข้าถึงและจัดการข้อมูลก่อนที่จะส่งคืนไปยัง component s นี่คือตัวอย่างการกำหนด getter ใน 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 s ของคุณ

ตัวอย่าง:

ใน store.js  ไฟล์ คุณสามารถประกาศ state การกลายพันธุ์อย่างง่าย ๆ ดังนี้:

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

ใน Vue component คุณสามารถใช้ state and การกลายพันธุ์ได้โดยใช้  and  ฟังก์ชั่น: mapState mapMutations

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

ด้วยขั้นตอนเหล่านี้ คุณได้ติดตั้งสำเร็จ Vuex และสามารถใช้เพื่อจัดการ แอปพลิเคชัน state ของคุณ ได้ Vue.js

 

ด้วย Vuex คุณสามารถจัดการแอปพลิเคชันได้อย่างง่ายดายและ state สม่ำเสมอ ช่วยเพิ่มความสามารถในการบำรุงรักษาโค้ดและการนำกลับมาใช้ใหม่ ในขณะที่ให้แนวทางที่มีโครงสร้างในการจัดการข้อมูล