這篇文章主要介紹Vuex如何通過actions模擬異步請求,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
目前創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計、保山網(wǎng)站維護(hù)等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
一、比如說我現(xiàn)在有這么個需求,當(dāng) count < 5 的時候,就停止 count-- 。這就需要用到 actions
actions 定義要執(zhí)行的動作,如流程的判斷、異步請求
在 store.js 內(nèi)的 actions 中
// 定義 actions ,要執(zhí)行的動作,如流程的判斷、異步請求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **通過動作改變的數(shù)據(jù),在此處來做判斷是否提交** if (state.count > 5) { commit('decrement') } } }
運行項目
二、通過 actions 模擬異步請求
1. 先在 App.vue 中定義好事件
<template> <div id="app"> <button @click="increment">增加</button> <button @click="decrement">減少</button> //異步請求事件 <button @click="incrementAsync">異步增加</button> <h2>{{count}}</h2> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ 'count' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>
2. 在 store.js 內(nèi)的 actions 中添加 異步 Promise 事件
// 定義 actions ,要執(zhí)行的動作,如流程的判斷、異步請求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **通過動作改變的數(shù)據(jù),在此處來做判斷是否提交** if (state.count > 5) { commit('decrement') } }, incrementAsync({commit,state}){ // 模擬異步操作 var a = new Promise((resolve,reject) => { setTimeout(() => { resolve(); }, 3000); }) // 3 秒之后提交一次 increment ,也就是執(zhí)行一次 increment a.then(() => { commit('increment') }).catch(() => { console.log('異步操作失敗'); }) } }
運行項目
三、獲取數(shù)據(jù)狀態(tài)
假如我們需要知道數(shù)據(jù)的奇偶數(shù),那么就需要在 getters 中來判斷。
getters 中可以獲取經(jīng)過處理后的數(shù)據(jù),從而來判斷狀態(tài)
在 store.js 的 getters 中加入判斷奇偶數(shù)的方法
var getters={ count(state){ return state.count }, EvenOrOdd(state){ return state.count%2==0 ? '偶數(shù)' : '奇數(shù)' } }
在 App.vue 中加入
<template> <div id="app"> <button @click="increment">增加</button> <button @click="decrement">減少</button> <button @click="incrementAsync">異步增加</button> <h2>{{count}}</h2> <!-- 判斷奇偶數(shù)的方法 這種寫法它會自動調(diào)用 EvenOrOdd 方法中的返回值,拿到的是個屬性 --> <h2>{{EvenOrOdd}}</h2> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ // 判斷奇偶數(shù)的方法 'EvenOrOdd', 'count' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>
以上是“Vuex如何通過actions模擬異步請求”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:Vuex如何通過actions模擬異步請求
新聞來源:http://muchs.cn/article14/jcpsge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、虛擬主機、軟件開發(fā)、定制網(wǎng)站、網(wǎng)站維護(hù)、企業(yè)網(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)