Vuex提升學(xué)習(xí)篇
本文介紹了Vuex 提升學(xué)習(xí)教程。如果本篇有看不明白的地方,請(qǐng)移步上一篇:Vuex 入門
上一篇我們講了如何通過一些簡單的動(dòng)作來改變 store.js 中的數(shù)據(jù)對(duì)象,在實(shí)際工作中,這是完全無法滿足工作需求的,所以這篇我們來說說如何做一些簡單的流程判斷。
自制vuex LOGO
一、比如說我現(xiàn)在有這么個(gè)需求,當(dāng) count < 5 的時(shí)候,就停止 count-- 。這就需要用到 actions
actions 定義要執(zhí)行的動(dòng)作,如流程的判斷、異步請(qǐng)求
在 store.js 內(nèi)的 actions 中
// 定義 actions ,要執(zhí)行的動(dòng)作,如流程的判斷、異步請(qǐng)求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **通過動(dòng)作改變的數(shù)據(jù),在此處來做判斷是否提交** if (state.count > 5) { commit('decrement') } } }
運(yùn)行項(xiàng)目
二、通過 actions 模擬異步請(qǐng)求
1. 先在 App.vue 中定義好事件
<template> <div id="app"> <button @click="increment">增加</button> <button @click="decrement">減少</button> //異步請(qǐng)求事件 <button @click="incrementAsync">異步增加</button> <h1>{{count}}</h1> </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í)行的動(dòng)作,如流程的判斷、異步請(qǐng)求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **通過動(dòng)作改變的數(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('異步操作失敗'); }) } }
運(yùn)行項(xiàng)目
三、獲取數(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> <h1>{{count}}</h1> <!-- 判斷奇偶數(shù)的方法 這種寫法它會(huì)自動(dòng)調(diào)用 EvenOrOdd 方法中的返回值,拿到的是個(gè)屬性 --> <h1>{{EvenOrOdd}}</h1> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ // 判斷奇偶數(shù)的方法 'EvenOrOdd', 'count' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>
判斷奇偶數(shù).gif
如有不明白之處,還請(qǐng)留言交流,或者直接翻看 API
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
- Vuex之理解Store的用法
- 如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用
- 詳解vuex 中的 state 在組件中如何監(jiān)聽
- Vuex之理解Mutations的用法實(shí)例
- Vue.js實(shí)戰(zhàn)之Vuex的入門教程
- Vuex之理解Getters的用法實(shí)例
- 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
- Vuex之理解state的用法實(shí)例
- vue+vuex+axio從后臺(tái)獲取數(shù)據(jù)存入vuex實(shí)現(xiàn)組件之間共享數(shù)據(jù)
相關(guān)文章
vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級(jí)+點(diǎn)擊空白處回退功能
這篇文章主要介紹了vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級(jí)+點(diǎn)擊空白處回退,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié),從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié),本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章,后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01詳解Vue中的render:?h?=>?h(App)示例代碼
這篇文章主要介紹了Vue中的render:?h?=>?h(App),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對(duì)數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧2022-11-11vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題
這篇文章主要介紹了vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06Vue實(shí)現(xiàn)路由過渡動(dòng)效的4種方法
Vue 路由過渡是對(duì) Vue 程序一種快速簡便的增加個(gè)性化效果的的方法,這篇文章主要介紹了Vue實(shí)現(xiàn)路由過渡動(dòng)效的4種方法,感興趣的可以了解一下2021-05-05