March 6, 2020

vuex 教學:vue 的狀態管理工具

響應式狀態更新


文 / 西打藍 Siddharam

前言


蠻多專案都有用到 vuex,原因是 vuex 可以讓你很方便地管理全站共用的資料 / 狀態。例如一個收集客戶資料的網站,可能有許多份表單需要填寫,當組件切換時,為了方便儲存資料,就會統一在 vuex 做管理與蒐集。

那我們就開始吧。

vuex


首先我們會安裝 vuex,如果使用 CLI 的話,可以主動勾選安裝 vuex 選項:

npm install vuex --save

接著,我們要創建一個 store,並將此次會運用到的三個 object 放入,分別是 state、mutation、action。



// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

}

const mutations = {

}

const actions = {

}

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




以上就完成 vuex 的結構。接著,我們來嘗試 vuex 的第一種用法, state 和 mutation。



// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  companyId: ''
}

const mutations = {
  addCompanyId (state, data) {
    state.companyId = data
  },
}

const actions = {

}

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




state 是我們的狀態列表,以上面為例,companyId 類似組件中的 data,而 mutations 則是專門用來更新 companyId 的 methods。定義好之後,該如何使用他們呢?下方將會示範:



// components/CompanyInfo.vue

...
...

computed: {
  getCompanyName: {
    return this.$store.state.companyId
  }
},
methods: {
  handleCompanyName: {
    this.$store.commit('addCompanyId', '西打藍')
  }
}

...
...




上述範例中,getCompanyName 可以獲取 vuex 中 state.companyId 的資料。純示範拿 state 資料,並沒用到。

而 handleCompanyName 則會直接呼叫 mutations.addCompanyId 這支 function,將 '西打藍' 傳入後更新。但 mutation 有一個限制,就是它是同步執行

是不是很簡單方便?

再來是 action。action 只做一件事情,就是使用 mutation。但,為何不直接使用 mutation 就好呢?

原因是 mutation 是同步,而 action 則是異步操作。



// store/index.js

...
...

const actions = {

  handleCompanyNameAsync ({ commit }) {
    setTimeout(() => {
      commit('handleCompanyName')
    }, 1000)
  }

}

...
...



使用時,則用 dispatch:



components/ContactUs.vue

...
...

methods: {
  this.$store.dispatch('handleCompanyNameAsync')
}

...
...



vuex 的教學就到這邊,其他還有 getter、module 的概念,我們留待下次說。




閱讀量




聯絡與合作


有文字採訪、網站開發,或是諮詢需求,皆可以來信詢問。在關於下方有作品參考。

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: aaa24295234@gmail.com

訂閱: