Komunikasi komponen Vue: menggunakan pemalam Vuex untuk komunikasi merentas komponen

Komunikasi komponen Vue: Gunakan pemalam Vuex untuk komunikasi merentas komponen

Dalam pembangunan Vue, komunikasi komponen adalah keperluan yang sangat biasa dan penting. Dalam Vue, menggunakan pemalam Vuex boleh mencapai komunikasi merentas komponen dengan mudah, yang bukan sahaja memudahkan kod, tetapi juga meningkatkan kecekapan pembangunan.

Apakah itu Vuex

Vuex ialah mod pengurusan keadaan Vue.js, digunakan untuk mengurus keadaan semua komponen dalam aplikasi Vue secara berpusat. Ia berdasarkan seni bina Flux dan idea reka bentuk Redux, menyediakan mekanisme pengurusan keadaan yang boleh diramal untuk Vue.

Dalam Vuex, semua negeri disimpan dalam gudang data global (kedai) dan boleh diakses serta diubah suai melalui atribut keadaan dalam stor. Komponen mengubah keadaan dalam stor dengan menghantar dan melakukan mutasi.

Pasang dan konfigurasikan Vuex

Mula-mula, kita perlu memasang Vuex dalam projek Vue. Ia boleh dipasang melalui npm atau benang:

npm install vuex --save

Kemudian, cipta folder bernama kedai dalam projek Vue kami untuk menyimpan kod berkaitan Vuex. Dalam folder kedai, cipta fail bernama index.js sebagai fail konfigurasi Vuex.

Dalam fail index.js, kita perlu mengimport Vue dan Vuex dan membuat contoh Vuex.Store baharu. Kodnya adalah seperti berikut:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 状态数据
  },
  mutations: {
    // 状态改变方法
  },
  actions: {
    // 异步操作方法
  },
  modules: {
    // 模块化配置
  }
})

Dalam kod di atas, kita dapat melihat bahawa keadaan digunakan untuk menyimpan data keadaan, mutasi digunakan untuk menentukan kaedah untuk menukar keadaan, tindakan digunakan untuk menentukan kaedah operasi tak segerak, dan modul digunakan untuk membahagikan kedai kepada modul.

Menggunakan Vuex dalam komponen

Untuk menggunakan Vuex dalam komponen, anda perlu mengimport Vuex terlebih dahulu dan menggunakan sifat pengiraan Vue untuk memetakan keadaan dalam stor kepada sifat komponen tersebut.

Sebagai contoh, dalam komponen yang dipanggil Counter, kami ingin melaksanakan fungsi meningkatkan kiraan dengan mengklik butang. Mula-mula, import Vuex dalam komponen dan tentukan kiraan atribut yang dikira, dan petakan kiraan keadaan dalam stor kepada atribut ini. Kodnya adalah seperti berikut:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}

Kemudian, gunakan atribut count dalam templat untuk membuat persembahan. Kodnya adalah seperti berikut:

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Akhir sekali, tentukan kaedah kenaikan dalam komponen untuk meningkatkan kiraan dengan menghantar mutasi. Kodnya adalah seperti berikut:

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['INCREMENT']),
    increment() {
      this.INCREMENT()
    }
  }
}

Dalam kod di atas, kami menggunakan kaedah mapMutations untuk memetakan kaedah INCREMENT kepada kaedah komponen, supaya kaedah INCREMENT boleh dipanggil terus dalam komponen untuk mencetuskan mutasi.

Komunikasi merentas komponen

Vuex bukan sahaja boleh melaksanakan pengurusan negeri tempatan dalam komponen, tetapi juga mencapai komunikasi merentas komponen, iaitu perkongsian data dan komunikasi antara komponen yang berbeza.

Sebagai contoh, kami mempunyai dua komponen: A dan B. Terdapat keadaan yang dipanggil mesej dalam komponen A, dan kami ingin mendapatkan dan memaparkan keadaan ini dalam komponen B.

Pertama, dalam templat dalam komponen A, kita perlu menggunakan ini.$store.state.message untuk mendapatkan keadaan. Kodnya adalah seperti berikut:

<template>
  <div>
    <p>当前消息：{{ $store.state.message }}</p>
  </div>
</template>

Kemudian, dalam komponen B, kita perlu memetakan status mesej dalam komponen A kepada sifat ini melalui harta yang dikira. Kodnya adalah seperti berikut:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}

Akhir sekali, gunakan atribut mesej dalam templat komponen B untuk menghasilkan. Kodnya adalah seperti berikut:

<template>
  <div>
    <p>组件A中的消息：{{ message }}</p>
  </div>
</template>

Melalui langkah di atas, kita boleh mencapai perkongsian data dan komunikasi antara komponen A dan komponen B.

Ringkasan:

Melalui pemalam Vuex, kami boleh memudahkan pemindahan data dan komunikasi antara komponen dan meningkatkan kecekapan pembangunan. Pada masa yang sama, penggunaan Vuex juga menjadikan kod kami lebih jelas dan lebih mudah untuk diselenggara. Oleh itu, dalam pembangunan Vue, adalah disyorkan untuk menggunakan pemalam Vuex untuk komunikasi komponen.

Atas ialah kandungan terperinci Komunikasi komponen Vue: menggunakan pemalam Vuex untuk komunikasi merentas komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!