vue進一步深刻

咱們都知道如何經過一些簡單的動做來改變 store.js 中的數據對象，在實際工做中，這是徹底沒法知足工做需求的，因此我來講說如何作一些簡單的流程判斷。

1、好比說我如今有這麼個需求，當 count < 5 的時候，就中止 count-- 。這就須要用到 actions

actions 定義要執行的動做，如流程的判斷、異步請求

在 store.js 內的 actions 中

// 定義 actions ，要執行的動做，如流程的判斷、異步請求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **經過動做改變的數據，在此處來作判斷是否提交** if (state.count > 5) { commit('decrement') } } } 

運行項目

count--.gif

2、經過 actions 模擬異步請求

1. 先在 App.vue 中定義好事件

<template> <div id="app"> <button @click="increment">增長</button> <button @click="decrement">減小</button> //異步請求事件 <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 內的 actions 中添加 異步 Promise 事件

// 定義 actions ，要執行的動做，如流程的判斷、異步請求 const actions ={ increment({commit,state}){ commit('increment') }, decrement({ commit, state }) { // **經過動做改變的數據，在此處來作判斷是否提交** if (state.count > 5) { commit('decrement') } }, incrementAsync({commit,state}){ // 模擬異步操做 var a = new Promise((resolve,reject) => { setTimeout(() => { resolve(); }, 3000); }) // 3 秒以後提交一次 increment ，也就是執行一次 increment a.then(() => { commit('increment') }).catch(() => { console.log('異步操做失敗'); }) } } 

運行項目

異步.gif

3、獲取數據狀態

假如咱們須要知道數據的奇偶數，那麼就須要在 getters 中來判斷。

getters 中能夠獲取通過處理後的數據，從而來判斷狀態

在 store.js 的 getters 中加入判斷奇偶數的方法

var getters={ count(state){ return state.count }, EvenOrOdd(state){ return state.count%2==0 ? '偶數' : '奇數' } } 

在 App.vue 中加入

<template> <div id="app"> <button @click="increment">增長</button> <button @click="decrement">減小</button> <button @click="incrementAsync">異步增長</button> <h1>{{count}}</h1> <!-- 判斷奇偶數的方法 這種寫法它會自動調用 EvenOrOdd 方法中的返回值，拿到的是個屬性 --> <h1>{{EvenOrOdd}}</h1> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ // 判斷奇偶數的方法 'EvenOrOdd', 'count' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script> 

判斷奇偶數.gif

若是有什麼我講的不明白的地方，你們能夠留言，或者我所說不對的地方，歡迎指出，避免你們之後繼續踩坑.