Vuex狀態(tài)管理之Action異步操作實例分析

這篇文章主要介紹“Vuex狀態(tài)管理之Action異步操作實例分析”，在日常操作中，相信很多人在Vuex狀態(tài)管理之Action異步操作實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vuex狀態(tài)管理之Action異步操作實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供安鄉(xiāng)網(wǎng)站建設(shè)、安鄉(xiāng)做網(wǎng)站、安鄉(xiāng)網(wǎng)站設(shè)計、安鄉(xiāng)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、安鄉(xiāng)企業(yè)網(wǎng)站模板建站服務(wù)，10年安鄉(xiāng)做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

action用法

一、 基本知識

1、不要再Mutation中進行異步操作.

但是某些情況, 我們確實希望在Vuex中進行一些異步操作, 比如網(wǎng)絡(luò)請求, 必然是異步的. 這個時候怎么處理呢?

Action類似于Mutation, 但是是用來代替Mutation進行異步操作的.

Action的基本使用代碼如下:

context是什么?

（1）context是和store對象具有相同方法和屬性的對象.

（2）也就是說, 我們可以通過context去進行commit相關(guān)的操作, 也可以獲取context.state等.

2、action的方法調(diào)用

在Vue組件中, 如果我們調(diào)用action中的方法, 那么就需要使用dispatch

同樣的, 也是支持傳遞payload

3、Action與Promise

在Action中, 我們可以將異步操作放在一個Promise中, 并且在成功或者失敗后, 調(diào)用對應(yīng)的resolve或reject

二、 效果

頁面中調(diào)用action中的方法

三、目錄結(jié)構(gòu)

四、源碼

index.js

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: {}
})

App.vue

<template>
    <div >
        <h3>----------action: info對象的內(nèi)容是否是響應(yīng)式----------</h3>
        <h3>{{$store.state.info}}</h3>
        <button @click="updateInfo">修改信息</button>
    </div>
</template>
 
<script>
    import {    computed } from 'vue'
    import {    useStore } from 'vuex'
    export default {
        components: {
        },
        methods: {
            updateInfo() {
              this.$store.dispatch('aUpdateInfo', '我是攜帶的信息')
                .then(res => {
                  console.log('里面完成了提交');
                  console.log(res);
                })
            },
              
        },
        setup() {
            return {
                  
            }
        }
    }
</script>

到此，關(guān)于“Vuex狀態(tài)管理之Action異步操作實例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享標(biāo)題：Vuex狀態(tài)管理之Action異步操作實例分析
鏈接URL：http://bm7419.com/article0/jdepoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、外貿(mào)建站、靜態(tài)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)