Apakah kegunaan kedai dalam vue?

Dalam Vue, kedai digunakan untuk mengurus keadaan, berkongsi data dan mengurus keadaan luaran antara pelbagai komponen Kedai adalah teras aplikasi vuex, yang merupakan bekas yang mengandungi kebanyakan keadaan dan perubahan dalam permohonan. Satu-satunya cara untuk mengekalkan keadaan dalam stor adalah dengan menyerahkan mutasi.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah kegunaan kedai dalam Vue

Vuex ialah model pengurusan negeri yang dibangunkan khas untuk aplikasi Vue.js. Ia menggunakan storan terpusat untuk mengurus status semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan status berubah dengan cara yang boleh diramal.

Inti setiap aplikasi Vuex ialah kedai. "Kedai" pada asasnya ialah bekas yang mengandungi kebanyakan keadaan dalam aplikasi anda. Terdapat dua perbezaan antara Vuex dan objek global ringkas:

Storan keadaan Vuex adalah responsif. Apabila komponen Vue membaca keadaan daripada kedai, jika keadaan dalam kedai berubah, komponen yang sepadan akan dikemas kini dengan cekap sewajarnya.

Anda tidak boleh terus menukar keadaan dalam kedai. Satu-satunya cara untuk menukar keadaan dalam stor adalah dengan melakukan mutasi secara eksplisit. Ini membolehkan kami menjejaki setiap perubahan keadaan dengan mudah, membolehkan kami melaksanakan beberapa alatan untuk membantu kami memahami aplikasi kami dengan lebih baik.

Konsep teras kedai

keadaan mewakili keadaan dalam stor, serupa dengan atribut data dalam contoh vue.

Mutasi

Satu-satunya cara untuk menukar keadaan dalam stor Vuex adalah dengan menyerahkan mutasi.

Mutasi dalam Vuex sangat serupa dengan peristiwa: setiap mutasi mempunyai jenis acara rentetan (jenis) dan fungsi panggil balik (pengendali). Fungsi panggil balik ini ialah tempat kita sebenarnya membuat perubahan keadaan dan ia akan menerima keadaan sebagai parameter pertama

Tindakan

Tindakan adalah serupa dengan mutasi, kecuali bahawa:

Tindakan Apa dikemukakan adalah mutasi, bukan perubahan keadaan langsung.

Tindakan boleh mengandungi sebarang operasi tak segerak.

Contoh

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Penggunaan kedai

Sebelum menggunakan kedai, anda mesti memasang vuex dahulu:

npm install vuex

Selepas memasang Vuex, mari buat kedai. Penciptaan adalah mudah - hanya sediakan objek keadaan awal dan beberapa mutasi.

Buat folder kedai baharu, dan kemudian buat fail index.js baharu:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

Untuk mengakses harta ini.$store dalam komponen Vue, anda perlu menyediakan kedai yang dibuat untuk contoh Vue. Vuex menyediakan mekanisme untuk "menyuntik" stor daripada komponen akar kepada semua sub-komponen dalam bentuk pilihan kedai.

Iaitu, importnya dalam fail main.js dan daftarkannya dalam contoh akar vue:

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

Kemudian anda boleh lulus store.commit di bawah atribut kaedah kaedah mana-mana vue komponen ('kenaikan') untuk memanggil:

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

Kesannya adalah seperti berikut:

[Cadangan berkaitan: "vue.js tutorial 》】

Atas ialah kandungan terperinci Apakah kegunaan kedai dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!