Komunikasi komponen Vue: menggunakan vuex untuk komunikasi pengurusan negeri-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Komunikasi komponen Vue: menggunakan vuex untuk komunikasi pengurusan negeri

王林

Jul 09, 2023 am 10:16 AM

vuex Pengurusan status komponen vue

Komunikasi komponen Vue: Menggunakan vuex untuk komunikasi pengurusan negeri

Pengenalan:
Dalam pembangunan Vue, komunikasi antara komponen ialah isu utama. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, antaranya menggunakan vuex untuk pengurusan negeri adalah cara biasa. Artikel ini akan memperkenalkan cara menggunakan vuex untuk komunikasi komponen dan menyediakan contoh kod untuk membantu pembaca memahami dengan lebih baik.

1. Apa itu vuex
Vuex ialah perpustakaan pengurusan negeri rasmi Vue.js Ia boleh merealisasikan pengurusan keadaan global dan komunikasi antara komponen. Vuex menguruskan keadaan semua komponen aplikasi berdasarkan storan terpusat dan menyediakan satu set API untuk menukar keadaan dan keadaan akses. Menggunakan Vuex menjadikannya lebih mudah untuk berkongsi keadaan antara berbilang komponen, meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod.

2. Konsep asas vuex

Negeri (keadaan): vuex menyimpan semua keadaan dalam satu pepohon keadaan, dan mentakrifkan serta mengakses keadaan melalui negeri.
Getters (Sifat Dikira): Sesetengah keadaan boleh diperoleh daripada keadaan melalui getter, serupa dengan sifat yang dikira dalam tika Vue.
Mutasi (perubahan): Satu-satunya cara untuk mengemas kini keadaan melalui mutasi adalah dengan menyerahkan mutasi. Keadaan ini tidak boleh diubah secara langsung dalam mutasi.
Tindakan: Serahkan mutasi melalui tindakan, yang boleh melakukan operasi tak segerak dan boleh mengandungi sebarang operasi tak segerak.

3. Langkah menggunakan vuex untuk komunikasi komponen

Pasang vuex: Pasang vuex dalam projek, anda boleh menggunakan npm atau benang untuk memasang.

Buat kedai: Buat folder kedai dalam direktori src, buat fail index.js di bawah folder kedai, perkenalkan vuex dan buat objek kedai.

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
 count: 0
  },
  mutations: {
 increment(state) {
   state.count++
 }
  },
  actions: {
 increment(context) {
   context.commit('increment')
 }
  },
  getters: {
 doubleCount(state) {
   return state.count * 2
 }
  }
})

Perkenalkan kedai dalam fail main.js dan lekapkannya pada tika Vue.

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Gunakan vuex dalam komponen:
Dalam komponen yang perlu menggunakan keadaan, petakan keadaan kepada sifat komponen yang dikira melalui mapState.
Dalam komponen yang perlu menggunakan pengambil, petakan pengambil kepada sifat komponen yang dikira melalui mapGetters.
Dalam komponen yang perlu mengubah suai keadaannya, petakan mutasi kepada kaedah komponen melalui mapMutations.
Dalam komponen yang memerlukan operasi tak segerak, petakan tindakan kepada kaedah komponen melalui mapActions.

4. Contoh Kod
Berikut ialah contoh mudah untuk menunjukkan cara menggunakan vuex untuk komunikasi komponen.

Buat komponen bernama Counter dan paparkan nilai kiraan dan doubleCount dalam templat.

// Counter.vue
<template>
  <div>
 <p>Count: {{ count }}</p>
 <p>Double Count: {{ doubleCount }}</p>
 <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
 ...mapState(['count']),
 ...mapGetters(['doubleCount'])
  },
  methods: {
 ...mapMutations(['increment'])
  }
}
</script>

Perkenalkan komponen Kaunter dalam App.vue dan gunakannya.

// App.vue
<template>
  <div id="app">
 <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

export default {
  components: {
 Counter
  }
}
</script>

Ringkasan:
Menggunakan vuex untuk komunikasi pengurusan negeri boleh memudahkan proses komunikasi antara komponen dan meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod. Dengan mencipta stor dan menentukan keadaan, mutasi, tindakan, dsb., perkongsian keadaan dan pemindahan maklumat antara komponen yang berbeza boleh dicapai. Melalui langkah dan contoh kod di atas, saya percaya pembaca boleh lebih memahami dan menggunakan vuex untuk komunikasi komponen.

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Skop pembolehubah PHP dijelaskan

1 bulan yang lalu By 百草

Mengulas kod dalam php

4 minggu yang lalu By 百草

<🎜>: Tumbuh Taman - Panduan Lengkap untuk Melancong Pedagang

4 minggu yang lalu By Jack chen

Petua untuk menulis komen php

4 minggu yang lalu By 百草

Destiny 2: The Edge of Fate - Bagaimana Pengubah Kesukaran Berfungsi

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Laravel

1605

Tutorial PHP

1510

276

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] jenis tindakan yang tidak diketahui: xxx' apabila menggunakan vuex dalam aplikasi Vue? Jun 25, 2023 pm 12:09 PM

Dalam projek Vue.js, vuex ialah alat pengurusan keadaan yang sangat berguna. Ia membantu kami berkongsi keadaan antara berbilang komponen dan menyediakan cara yang boleh dipercayai untuk mengurus perubahan keadaan. Tetapi apabila menggunakan vuex, kadangkala anda akan menghadapi ralat "Error:[vuex]unknownactiontype:xxx". Artikel ini akan menerangkan punca dan penyelesaian ralat ini. 1. Punca ralat Apabila menggunakan vuex, kita perlu menentukan beberapa tindakan dan mu

Komunikasi komponen Vue: gunakan $destroy untuk komunikasi pemusnahan komponen Jul 09, 2023 pm 07:52 PM

Komunikasi komponen Vue: Gunakan $destroy untuk komunikasi pemusnahan komponen Dalam pembangunan Vue, komunikasi komponen merupakan aspek yang sangat penting. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, seperti props, emit, vuex, dsb. Artikel ini akan memperkenalkan satu lagi kaedah komunikasi komponen: menggunakan $destroy untuk komunikasi pemusnahan komponen. Dalam Vue, setiap komponen mempunyai kitaran hayat, yang merangkumi satu siri fungsi cangkuk kitaran hayat. Pemusnahan komponen juga merupakan salah satu daripadanya Vue menyediakan $de

Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] tidak mengubah keadaan kedai vuex di luar pengendali mutasi apabila menggunakan vuex dalam aplikasi Vue? Jun 24, 2023 pm 07:04 PM

Dalam aplikasi Vue, menggunakan vuex ialah kaedah pengurusan keadaan biasa. Walau bagaimanapun, apabila menggunakan vuex, kadangkala kita mungkin menghadapi mesej ralat sedemikian: "Ralat:[vuex]donotmutatevuexstorestateoutsidemutationhandlers Apakah maksud mesej ralat ini? Mengapa mesej ralat ini muncul? Bagaimana untuk membetulkan ralat ini? Artikel ini akan membincangkan isu ini secara terperinci. Mesej ralat mengandungi

Amalan terbaik untuk menggunakan Vuex untuk mengurus keadaan global dalam Vue2.x Jun 09, 2023 pm 04:07 PM

Vue2.x ialah salah satu rangka kerja bahagian hadapan paling popular pada masa ini, yang menyediakan Vuex sebagai penyelesaian untuk mengurus keadaan global. Menggunakan Vuex boleh menjadikan pengurusan negeri lebih jelas dan lebih mudah diselenggarakan Amalan terbaik Vuex akan diperkenalkan di bawah untuk membantu pembangun menggunakan Vuex dengan lebih baik dan meningkatkan kualiti kod. 1. Gunakan keadaan organisasi modular Vuex menggunakan pepohon keadaan tunggal untuk mengurus semua keadaan aplikasi, mengekstrak keadaan daripada komponen, menjadikan pengurusan negeri lebih jelas dan lebih mudah difahami. Dalam aplikasi dengan banyak keadaan, modul mesti digunakan

Bagaimana untuk menyelesaikan masalah 'TypeError: Tidak dapat membaca harta 'xxx' undefined' apabila menggunakan vuex dalam aplikasi Vue? Aug 18, 2023 pm 09:24 PM

Menggunakan Vuex dalam aplikasi Vue adalah operasi yang sangat biasa. Walau bagaimanapun, kadangkala apabila menggunakan Vuex, anda akan menemui mesej ralat "TypeError: Cannotreadproperty'xxx'ofundefined". Sebab masalah ini sebenarnya sangat jelas Ia adalah kerana apabila memanggil atribut Vuex tertentu, atribut ini tidak ditetapkan dengan betul.

Komunikasi komponen Vue: menggunakan jam tangan dan dikira untuk pemantauan data Jul 10, 2023 am 09:21 AM

Komunikasi komponen Vue: menggunakan jam tangan dan dikira untuk pemantauan data Vue.js ialah rangka kerja JavaScript yang popular dan idea terasnya ialah komponenisasi. Dalam aplikasi Vue, data perlu dipindahkan dan disampaikan antara komponen yang berbeza. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jam tangan Vue dan dikira untuk memantau dan bertindak balas kepada data. watch Dalam Vue, jam tangan ialah pilihan yang boleh digunakan untuk memantau perubahan dalam satu atau lebih sifat.

Cara menggunakan Vuex dalam Vue3 May 14, 2023 pm 08:28 PM

Apakah yang Vuex lakukan? Vue rasmi: Alat pengurusan negeri Apakah pengurusan negeri yang perlu dikongsi di antara pelbagai komponen, dan ia responsif, satu perubahan, semua perubahan? Contohnya, beberapa maklumat status yang digunakan secara global: status log masuk pengguna, nama pengguna, maklumat lokasi geografi, item dalam troli beli-belah, dll. Pada masa ini, kami memerlukan alat sedemikian untuk pengurusan status global, dan Vuex ialah alat sedemikian. Pengurusan keadaan halaman tunggal Paparan–>Tindakan–>Lapisan paparan keadaan (paparan) mencetuskan tindakan (tindakan) untuk menukar keadaan (keadaan) dan bertindak balas semula untuk melihat lapisan (pandangan) vuex (Vue3.

Amalan Vue: pembangunan komponen pemilih tarikh Nov 24, 2023 am 09:03 AM

Pertempuran Praktikal Vue: Pembangunan Komponen Pemilih Tarikh Pengenalan: Pemilih tarikh ialah komponen yang sering digunakan dalam pembangunan harian Ia boleh memilih tarikh dengan mudah dan menyediakan pelbagai pilihan konfigurasi. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk membangunkan komponen pemilih tarikh yang mudah dan menyediakan contoh kod khusus. 1. Analisis keperluan Sebelum memulakan pembangunan, kita perlu menjalankan analisis keperluan untuk menjelaskan fungsi dan ciri-ciri komponen. Menurut fungsi komponen pemilih tarikh biasa, kita perlu melaksanakan titik fungsi berikut: Fungsi asas: dapat memilih tarikh, dan

See all articles