Vuex 模塊化實現待辦事項的狀態管理

01-27

前言

在vue里，組件之間的作用域是獨立的，父組件跟子組件之間的通訊可以通過prop屬性來傳參，但是在兄弟組件之間通訊就比較麻煩了。比如A組件要告訴一件事給B組件，那麼A就要先告訴他們的爸組件，然後爸組件再告訴B。當組件比較多，要互相通訊的事情很多的話，爸組件要管他們那麼多事，很累的。vuex正是為了解決這個問題，讓多個子組件之間可以方便的通訊。

項目介紹

待辦事項中的一個事件，它可能擁有幾個狀態，未完成、已完成、已取消或被刪除等。這個事件需要在這多種狀態之間切換，那麼使用vuex來管理也是非常方便的。

來看一下vuex怎麼完成狀態管理的：

所有組件都是調用actions，分發mutation去修改state，然後state經過getter又更新到各個組件里。state又通過localStorage存儲數據到本地，下次重新打開時再讀取保存的數據。

模塊化

為什麼要用模塊化？當我們的項目比較大，組件很多，功能也多，會導致state里要存放很多內容，整個 store 都會很龐大，很難管理。

我模塊化的store目錄如下：

可以看到，每個模塊擁有自己的state、mutation、action、getter，這樣子我們就可以把我們的項目根據功能劃分為多個模塊去使用vuex了，而且後期維護也不會一臉懵逼。

狀態管理

接下來，我們來看看vuex完成狀態管理的一個流程。舉個栗子：一個待辦事項，勾選之後，會在未完成列表裡移除，並在已完成的列表裡出現。這個過程，是這個待辦事項的狀態發生了改變。勾選的時候，是執行了一個方法，那我們就先寫這個方法。在 event_list.vue 文件里新建一個moveToDone方法。

methods: {n moveToDone(id){ //移至已完成n this.$store.dispatch(eventdone, id);n }n}n

在 moveToDone 方法中通過 store.dispatch 方法觸發 action, 接下來我們在 eventModule/actions.js 中來註冊這個 action, 接受一個 id 的參數。

export default {n eventdone = ({ commit }, param) =>{n commit(EVENTDONE,{id: param});n }n}n

action 通過調用 store.commit 提交載荷(也就是{id: param}這個對象)到名為EVENTDONE的 mutation，那我們再來註冊這個 mutation

export default {n EVENTDONE(states,obj){n for (let i = 0; i < states.event.length; i++) {n if (states.event[i].id === obj.id) {n states.event[i].type = 2;n states.event[i].time = getDate();n var item = states.event[i];n states.event.splice(i, 1); // 把該事件在數組中刪除n break;n }n }n states.event.unshift(item); // 把該事件存到數組的第一個元素n local.set(states); // 將整個狀態存到本地n }n}n

通過 mutation 去修改 state, state里我們存放了一個 event 屬性

export default {n event: []n};n

在組件中要獲得這個 state 里的 event, 那就需要寫個getters

export default {n getDone(states){n return states.event.filter(function (d) {n if (d.type === 2) { // type == 2表示已完成n return d; // 返回已完成的事件n }n });n }n};n

然後每個module里都有一個index.js文件，把自己的state、mutation、action、getters都集合起來，就是一個module

import * as func from ../function;nimport actions from ./actions.js;nimport mutations from ./mutations.js;nimport state from ./state.js;nimport getters from ./getters.js;nnexport default {n state,n getters,n actions,n mutationsn}n

在 store/index.js 里創建一個 store 對象來存放這個module

import Vue from vue;nimport Vuex from vuex;nimport event from ./eventModule;nVue.use(Vuex);nexport default new Vuex.Store({n modules: {n eventn }n});n

最後在 event_list.vue 組件上，我們通過計算屬性 computed 來獲取到這個從未完成的狀態改變到已完成的狀態，我們要用到 store 這個對象里的getters

computed: {n getDone(){n return this.$store.getters.getDone;n }n}n

這樣子，完成了未完成 => 已完成從提交修改到更新視圖讀取的整個流程，也是 vuex 工作的整個流程。通過 module 的封裝，更加方便多模塊項目的開發和維護。

Vuex 模塊化實現待辦事項的狀態管理

前言

項目介紹

模塊化

狀態管理

演示地址 : demo

源碼地址 : notepad

更多文章 : blog