iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
0
Modern Web

30天手把手的vue.js教學!系列 第 19

2020it邦鐵人賽-30天手把手的Vue.js教學 Day19 - 認識vuex(上)

tags: Vue.js ItIron2020

前言

昨天我們利用了一個簡易的global store介紹了store的基礎概念,今天我們則要延伸那樣的資料集中管理概念,介紹vuex這個好用的小幫手! 事不宜遲,我們馬上開始吧!

什麼是Vuex

vuex是一個專門為vue專案開發的資料管理套件,可以為網站做全域的資料管理,就像我們昨天實作的store一樣! 差別是在vuex中則分為更細部state、mutations、actions等屬性,讓專案可以應付各種複雜的資料管理。 我們先看一張來自官方網站的圖片了解vuex的基本概念。

vuex

先將目光集中在Actions、Mutations、State and Components就好,簡單來說就是以下的流程

  • Components 透過State內的資料render出畫面
  • 資料需要變動時,透過Actions commit一個Mutation
  • Mutation 變更 State中的資料
  • Components 重新render變化後的結果

就像我們昨天講的store核心概念-你永遠不會在store外直接改動state的值
在vuex中你需要透過dispatch一個action去commit一個mutation才能改動state的值,一長串的新名詞簡直就是在繞口令,我知道初學的你們已經混亂了,跟著以下的實作相信會讓你們更清楚一些!

在vue-cli專案中加入vuex套件

當然你要在一般的vue專案中加入vuex也是可以的,透過yarn/npm甚至是CDN載入的方式都可以,不過這邊為了延續之前的說明,我們就在vue-cli打造的專案中加入vuex吧!
首先打開你的專案目錄,如果你是跟著做前兩天的專案的話,那就是iron-demo這個專案,打開你的終端機,並輸入以下的指令

vue add vuex

註: vue add 套件名稱 是在vue-cli中安裝套件的其中一個方法

vuex add

看到這樣的畫面就表示你順利安裝了,此時你觀察一下左邊的專案結構有幾個變化

  • main.js載入vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 這個

Vue.config.productionTip = false

new Vue({
  store, // 還有這個
  render: h => h(App)
}).$mount('#app')

  • 新增store/index.js檔案
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

我們先將重點放在下方的store/index.js,點開後你會看到如上方的結構,其實就是我們昨天做的store的進階版而已,真的不用想太難? 我們先來看看state、mutations & actions屬性吧!

認識State

state就像我們昨天說過的一樣,它很單純就是一個有著store內所有資料的物件,把它想為整個應用程式的資料狀態也可以! 舉個例子來說,我們可以在裡面增加一個numbers陣列,就像我們昨天做的一樣!

state: {
  numbers: [1,3,5,7,9]
}

認識Mutations

Mutations其實就是包含著一堆函數的物件,每一個mutation就是一個函數,負責接收actions並更改state的資料,其中有幾個注意事項。

  • mutation必定是同步函數,沒有例外
  • mutation是vuex中唯一可以改動state的方法

也就是說在vuex中,如果你要改變state狀態,你一定要經過以下的流程

  1. 發出一個action(dispatch an action)
  2. 接收到action後,執行對應的mutation (commit a mutation)
  3. 透過mutation更改state

你現在腦袋一定有著跟我相同的疑問,幹嘛這麼麻煩? 為什麼我不直接用actions去修改state的值就好了?

actions  ======> state

很遺憾的,你無法這樣做,原因在於同步&非同步的處理,很多時候我們會卡在一些非同步的計算、請求中,如果你將所有的邏輯都寫在同一個函數內,今天當有兩個不同的函數要操作同一個state資料,你要如何確保它們會按照你指定的順序完成呢?
於是我們需要多一層mutation的操作,先在aciton中處理可能的非同步請求,當取得對應的資料後,接著再透過mutation以處理同步的方式變更state的資料,這點較為抽象一些,可以參考我文章最後提供的參考資料,也許能讓人更容易了解一些!

現在你知道mutation的基本概念了,那我們實際寫一個簡單的mutation吧!
每一個mutation包含兩個參數

  1. state 你可以自由取用或更動state的數值
  2. payload 從actions傳來的參數
mutations: {
    ADD_NUMBER(state,payload) {
      state.numbers.push(payload)
    }
},

今天我們預期我們將從action那邊接到一個數字,這樣我們才有辦法將該數字推進原本的numbers陣列中,如果你預期action並不會傳入任何參數,那第二個參數自然可以不寫囉!

認識Actions

Actions就是為了呼叫Mutations而存在的東西,同樣有幾個事情你需要知道

  • Actions可以是非同步函數
  • 一個Action中可以觸發多個mutation

相對起來很單純,你只要記得我們需要透過action去呼叫mutaion就好了!
我們同樣實際寫個actions來看看吧! 每一個actions包含著兩個參數

  1. context 是一個物件,裡面可以讓你使用store中的commit、getter或是state屬性
  2. 想傳入mutation的參數,沒有要傳入則可省略
actions: {
    addNumber(context,number) {
      context.commit("ADD_NUMBER", number)
  }
}

你也可以透過es6的解構讓上方的寫法更簡便一些,我們在這次的action中只有需要使用到commit方法,那就可以將上方的寫法改為以下!

actions: {
    addNumber({commit},number) {
      commit("ADD_NUMBER", number)
    }
 }

如何? 是不是更輕鬆簡便了呢?

結語

我們今天介紹了vuex中的state、mutaions & actions,相信你對於它的基本結構有著一些認識了,當然其實你並不一定需要這樣的集中管理系統,在規模較小的時候其實之前介紹的資料溝通方式就足以應付了,不過這樣的flux資料管理方式在是許多前端框架共有的概念,實務上也真的相當常用,是個相當實用的工具! 今天就先到此為止,明天我們會繼續介紹剩下的東西! 大家佳節愉快!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D

參考文章

vuex官方文件
Jacky的vuex筆記


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day18- 建立簡單的store集中管理資料吧!
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day20 - 認識vuex(下)
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言