Vuex 提升

劉員外發表於2019-04-20
Vue

如果本篇有看不明白的地方，請移步上一篇：Vuex 入門

上一篇我們講了如何通過一些簡單的動作來改變 store.js 中的資料物件，在實際工作中，這是完全無法滿足工作需求的，所以這篇我們來說說如何做一些簡單的流程判斷。

自制vuex LOGO
自制vuex LOGO

一、比如說我現在有這麼個需求，當 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
count--.gif
二、通過 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
非同步.gif
三、獲取資料狀態

假如我們需要知道資料的奇偶數，那麼就需要在 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
判斷奇偶數.gif

如有不明白之處，還請留言交流，或者直接翻看 API


相關文章