Bagaimanakah vue meletakkan data yang diperolehi oleh antara muka dalam vuex

Vue ialah rangka kerja JavaScript popular yang membantu pembangun membina aplikasi web interaktif dan dinamik. Vue dikagumi secara meluas kerana kemudahan penggunaan dan fleksibilitinya. Vue juga membantu mengurus keadaan data aplikasi anda dengan menyediakan pemalam yang dipanggil Vuex. Vuex ialah corak pengurusan keadaan yang memusatkan semua keadaan aplikasi di satu tempat untuk mengurus dan memastikan penyegerakannya antara bahagian yang berbeza.

Apabila membangunkan aplikasi web menggunakan Vue, anda biasanya perlu mendapatkan data daripada pelayan untuk memaparkan paparan. Data ini boleh diperoleh daripada API melalui permintaan HTTP dan kemudian digunakan dalam komponen Vue. Dalam kes ini, Vuex boleh membantu kami memusatkan keadaan data supaya ia boleh dikongsi di seluruh aplikasi.

Dalam artikel ini, kami akan memperkenalkan cara meletakkan data yang diperoleh daripada API dalam Vuex. Kami akan menggunakan langkah berikut:

1. Cipta kedai Vuex
2. Dapatkan data API dan simpan dalam Vuex
3. Gunakan data yang disimpan dalam komponen Vue

Buat storan Vuex

Untuk menggunakan Vuex untuk menyimpan data, kita perlu mencipta fail store.js. Dalam fail store.js, kita perlu mengimport Vue dan Vuex terlebih dahulu. Kemudian, kita perlu menggunakan Vue.use(Vuex) untuk mendaftar pemalam Vuex.

import Vue dari 'vue'
import Vuex daripada 'vuex'

Vue.use(Vuex)

Dalam fail store.js kami akan mencipta Vuex menyimpan contoh yang akan mengandungi keadaan yang ingin kami kongsikan.

kedai const eksport = Vuex.Store baharu({
keadaan: {

data: []

},
mutasi: {

setData(state, payload) {
  state.data = payload
}

}
})

Dalam kod di atas, kami mentakrifkan keadaan bernama data dan menyediakan kaedah bernama setData dalam mutasi, yang digunakan untuk menyimpan data dalam keadaan data.

Seterusnya, kita perlu mengeksport tika kedai untuk menggunakannya dalam komponen Vue.

Dapatkan data API dan simpannya dalam Vuex

Dalam komponen Vue, kami boleh menggunakan axios atau perpustakaan HTTP lain untuk mendapatkan data daripada API. Dalam artikel ini, kami akan menggunakan axios untuk mendapatkan data.

Untuk mendapatkan data dan menyimpannya dalam Vuex, kita perlu memanggil kaedah tindakan dalam komponen Vue. Dalam fail store.js, kami akan menyediakan kaedah tindakan yang akan menerima data dan memanggil kaedah setData yang ditakrifkan dalam mutasi untuk menyimpannya dalam keadaan data.

Berikut ialah kod lengkap dalam fail store.js:

import Vue daripada 'vue'
import Vuex daripada 'vuex'
import axios daripada 'axios'

Vue.use(Vuex)

eksport const store = Vuex.Store baharu({
keadaan: {

data: []

},
mutasi: {

setData(state, payload) {
  state.data = payload
}

},
tindakan: {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}
})

Dalam kod di atas, kami mentakrifkan kaedah tindakan yang dipanggil getData. Kaedah ini menggunakan axios untuk mendapatkan data daripada alamat https://api.example.com/data. Apabila pemerolehan berjaya, ia akan menggunakan kaedah komit untuk memanggil kaedah mutasi setData untuk menyimpan data dalam keadaan data.

Gunakan data yang disimpan dalam komponen Vue

Keadaan yang ditakrifkan dalam fail store.js boleh digunakan dalam komponen Vue. Di bawah ialah contoh komponen yang akan mendapatkan data daripada keadaan data dalam fail store.js dan memaparkannya dalam templat.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="item in data" :key="item.id">
    {{ item.name }}
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

cc445a6ced5dafbd44ed44b465ef026d

Dalam kod di atas, kami menggunakan kaedah mapState dan mapActions yang disediakan oleh Vuex. Menggunakan mapState, kami memetakan keadaan data kepada sifat pengiraan komponen. Menggunakan mapActions, kami memetakan kaedah tindakan getData kepada kaedah komponen.

Apabila komponen dibuat, kami akan memanggil fungsi cangkuk yang dicipta dan memanggil kaedah getData di dalamnya untuk memuatkan data ke dalam keadaan data dalam fail store.js. Kita boleh menggelungkan data yang diperoleh melalui arahan v-untuk dan memaparkannya dalam templat.

Kesimpulan

Proses menyimpan data yang diperoleh daripada API dalam Vuex adalah seperti yang diterangkan di atas. Kami boleh menggunakan Vuex untuk mengurus keadaan aplikasi supaya data boleh dikongsi sepanjang aplikasi. Dalam komponen Vue, kita boleh menggunakan kaedah mapState dan mapActions untuk mengakses data dan kaedah yang disimpan dalam Vuex.

Atas ialah kandungan terperinci Bagaimanakah vue meletakkan data yang diperolehi oleh antara muka dalam vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!