Vuex狀態管理之Action非同步操作詳解

action用法

一、 基本知識

#1、不要再Mutation中進行非同步操作.

但是某些情況, 我們確實希望在Vuex中進行一些非同步操作, 例如網路請求, 必然是異步的. 這時候怎麼處理呢?

Action類似於Mutation, 但是是用來代替Mutation進行非同步操作的.

Action的基本使用程式碼如下：

 

#【相關推薦：vue.js影片教學】

context是什麼?

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

（2）也就是說, 我們可以透過context去進行commit相關的操作, 也可以取得context.state等.

2、action的方法呼叫

在Vue元件中, 如果我們呼叫action中的方法, 那麼就需要使用dispatch

 

 同樣的, 也是支援傳遞payload

 

3、 Action與Promise

在Action中, 我們可以將非同步操作放在一個Promise中, 並且在成功或失敗後, 呼叫對應的resolve或reject

 

 

二、在效果

#頁面中呼叫action中的方法

 

################################################################## # ############三、目錄結構######### ############四、原始碼######### 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 >
        <h2 id="action-nbsp-info对象的内容是否是响应式">----------action: info对象的内容是否是响应式----------</h2>
        <h2 id="store-state-info">{{$store.state.info}}</h2>
        <button @click="updateInfo">修改信息</button>
    </div>
</template>
 
<script>
    import {    computed } from &#39;vue&#39;
    import {    useStore } from &#39;vuex&#39;
    export default {
        components: {
        },
        methods: {
            updateInfo() {
              this.$store.dispatch(&#39;aUpdateInfo&#39;, &#39;我是携带的信息&#39;)
                .then(res => {
                  console.log(&#39;里面完成了提交&#39;);
                  console.log(res);
                })
            },
              
        },
        setup() {
            return {
                  
            }
        }
    }
</script>

以上是Vuex狀態管理之Action非同步操作詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！