Vuex提升學習篇，vuex提升

Vuex提升學習篇，vuex提升

本文介紹了Vuex 提升學習教程。如果本篇有看不明白的地方，請移步上一篇：Vuex 入門

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

自製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')    }  }}

運行項目

二、通過 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('非同步作業失敗');    })  }}

運行項目

三、擷取資料狀態

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。