Penjelasan terperinci dan contoh penggunaan Vuex untuk mengurus keadaan global dalam Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri mudah, tetapi apabila aplikasi menjadi semakin kompleks, kami akan mendapati bahawa menghantar sejumlah besar data kepada komponen kanak-kanak menjadi sangat sukar. Inilah sebabnya mengapa Vuex menjadi sangat penting dalam Vue. Vuex ialah pengurus negeri global yang memudahkan perkongsian data dan keadaan. Dalam artikel ini, kami akan melihat dengan lebih dekat cara Vuex berfungsi dan menunjukkan cara menyepadukannya ke dalam aplikasi Vue anda.

Apakah itu Vuex

Vuex ialah model pengurusan negeri dan perpustakaan untuk aplikasi Vue.js Ia sering digunakan untuk menyelesaikan masalah perkongsian keadaan peringkat merentas, berbilang komponen dan berbilang halaman . Ia memusatkan keadaan aplikasi ke dalam satu kedai dan menyediakan mekanisme untuk melaksanakan keadaan dikongsi. Digunakan untuk mengurus semua keadaan aplikasi sepanjang kitaran hayatnya.

Konsep teras Vuex

Vuex terdiri daripada empat bahagian teras berikut:

negeri

Negeri ialah kawasan storan keadaan aplikasi yang diuruskan oleh Vuex. State ialah objek JavaScript biasa yang digunakan untuk menyimpan keadaan aplikasi. Apabila mengisytiharkan keadaan, kami menentukan objek. Contoh berikut mentakrifkan objek keadaan mudah:

const state = {
    count: 0
}

getter

Getter digunakan untuk mendapatkan data daripada keadaan Data yang diperoleh boleh dikembalikan selepas beberapa pemprosesan berdasarkan keadaan semasa, serupa dengan Harta negeri yang dikira.

const getters = {
  getCount(state) {
    return state.count + 1;
  }
}

mutasi

Mutasi digunakan untuk memastikan operasi sehala data, iaitu, mutasi boleh mengubah data, tetapi tidak boleh mendapatkan data. Mutasi digunakan untuk mengubah suai keadaan, dan tidak boleh mengendalikan keadaan secara tidak segerak Untuk mengubah suai keadaan, anda perlu menggunakan kaedah komit.

const mutations = {
  increment(state) {
    state.count++
  }
}

tindakan

Tindakan digunakan untuk mengendalikan operasi tak segerak sebenarnya mencetuskan mutasi standard. Ia membolehkan anda merangkum semua kemas kini tentang keadaan tanpa mengubahnya secara langsung. Sebagai contoh, jika kami ingin menghantar permintaan tak segerak dalam aplikasi, kami boleh memanggil tindakan di sebelah untuk mengendalikannya.

const actions = {
   incrementByAsync({commit}) {
     setTimeout(() => {
       commit('incrementByAsync')
     }, 1000)
   }
 }

Melaksanakan contoh pembilang Vuex

Kami akan menggunakan projek contoh [Vue-cli 3](https://www.npmjs.com/package/vue-cli) saya yang terdedah, memulakan projek Vue melalui perancah rasmi.

$ vue create vuex-example

Seterusnya pasang vuex:

$ npm install vuex --save

Seterusnya kami akan mencipta contoh mudah aplikasi kaunter untuk peningkatan dan penurunan nombor. Walau bagaimanapun, kami akan menggunakan Vuex untuk menguruskan keadaan kaunter ini. Mula-mula, kami akan mencipta fail store.js baharu di bawah folder src projek. Ini ialah kedai Vuex kami.

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    actions: {
        increment({commit}) {
            commit('increment');
        },
        decrement({commit}) {
            commit('decrement');
        }
    },
    getters: {
        getCount(state) {
            return state.count;
        }
    }
});

export default store;

Dalam kod di atas, kami mula-mula mengimport Vuex dan Vue. Kemudian, kami memasang Vuex menggunakan kaedah Vue.use(). Kami mentakrifkan objek keadaan mudah untuk menyimpan nilai kaunter semasa. Kami juga mentakrifkan dua mutasi, yang digunakan untuk meningkatkan dan mengurangkan nilai kaunter semasa. Kami mentakrifkan dua tindakan, satu untuk melakukan operasi peningkatan dan satu lagi untuk melakukan operasi penurunan. Akhir sekali, kami mentakrifkan pengambil untuk mendapatkan nilai kaunter semasa.

Seterusnya, kami melakukan perubahan dan menggunakan vuex dan simpan dalam App.vue:

<template>
  <div id="app">
    <h3>{{ count }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import store from './store';

export default {
  name: 'app',
  store,
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

Dalam fail ini, kami mengimport modul kedai Vuex. Dalam contoh Vue, kami mencampurkan objek kedai supaya keadaan Vuex boleh digunakan sepanjang aplikasi. Seterusnya, kami mentakrifkan harta yang dikira untuk mendapatkan nilai kaunter semasa. Kami juga mentakrifkan dua kaedah untuk menambah dan mengurangkan nilai pembilang semasa. Kami menggunakan kaedah penghantaran untuk memanggil tindakan ini secara berasingan.

Akhir sekali, kami menghantar kedai ke contoh vue supaya keadaan dalam kedai boleh diakses dalam aplikasi. Sekarang anda boleh membuka penyemak imbas anda, pergi ke dalam aplikasi dan anda akan melihat pembilang mudah dan apabila anda mengklik butang ia akan menambah atau mengurangkan nilai pembilang semasa.

Ringkasan

Vuex ialah corak pengurusan keadaan dan perpustakaan untuk aplikasi Vue.js yang memudahkan perkongsian data dan keadaan. State, Getter, Mutation dan Action ialah konsep teras Vuex Penguasaan mendalam boleh menjadikan pembangun lebih fleksibel dalam mengendalikan perubahan keadaan dalam Vuex. Berdasarkan ini, kami membina program sampel pemasa untuk menunjukkan penggunaan Vuex. Jika anda ingin mempelajari Vuex dengan lebih mendalam, lihat dokumentasi rasminya.

Atas ialah kandungan terperinci Penjelasan terperinci dan contoh penggunaan Vuex untuk mengurus keadaan global dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!