Penjelasan terperinci mengenai operasi tak segerak Tindakan pengurusan keadaan Vuex

penggunaan tindakan

1 Pengetahuan asas

1. Jangan lakukan operasi tak segerak dalam Mutasi.

Tetapi. Dalam sesetengah kes, kami benar-benar ingin melakukan beberapa operasi tak segerak dalam Vuex, seperti permintaan rangkaian, yang mesti tidak segerak Bagaimana untuk menangani situasi ini

Tindakan serupa dengan Mutasi, tetapi ia digunakan untuk menggantikan Mutasi untuk operasi tak segerak. Kod penggunaan asas

Tindakan adalah seperti berikut:

[Cadangan berkaitan: tutorial video vue.js]

Apakah konteks?

(1) Konteks ialah objek dengan kaedah dan sifat yang sama seperti objek stor.

(2 ) Dalam erti kata lain, kita boleh menghantar konteks untuk melaksanakan operasi berkaitan komit, anda juga boleh mendapatkan context.state, dsb.

2. Panggilan kaedah tindakan

dalam komponen Vue, jika kita memanggil kaedah tindakan, maka anda perlu menggunakan dispatch

Begitu juga, ia juga menyokong lulus muatan

3. Tindakan dan Janji

Dalam Tindakan, kita boleh meletakkan operasi tak segerak dalam Janji, dan selepas berjaya atau gagal, hubungi azam yang sepadan atau tolak

2 Kesan

Panggil kaedah dalam tindakan pada halaman

<.>

3 Struktur direktori

4 🎜> index.js

App.vue

import { createStore} from 'vuex'


export default createStore({
	state: {
		counter: 0,
		info: {
		  name: 'kobe',
		  age: 40,
		  height: 1.98
		}
	},
	mutations: {
		updateInfo(state) {
		  state.info.name = 'coderwhy'
		}
	},
	actions: {
		aUpdateInfo(context, payload) {
		  return new Promise((resolve, reject) => {
		    setTimeout(() => {
		      context.commit('updateInfo');
		      console.log(payload);
		
		      resolve('1111111')
		    }, 1000)
		  })
		}
	},
	getters: { },
	modules: {}
})

Atas ialah kandungan terperinci Penjelasan terperinci mengenai operasi tak segerak Tindakan pengurusan keadaan Vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!