文 / 西打藍 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 的概念，我們留待下次說。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com