這篇文章將為大家詳細(xì)講解有關(guān)Vuex模塊化如何實現(xiàn)待辦事項的狀態(tài)管理，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為赫山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及赫山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、赫山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

項目介紹

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

來看一下vuex怎么完成狀態(tài)管理的：

所有組件都是調(diào)用actions，分發(fā)mutation去修改state，然后state經(jīng)過getter又更新到各個組件里。state又通過localStorage存儲數(shù)據(jù)到本地，下次重新打開時再讀取保存的數(shù)據(jù)。

模塊化

為什么要用模塊化？當(dāng)我們的項目比較大，組件很多，功能也多，會導(dǎo)致state里要存放很多內(nèi)容，整個 store 都會很龐大，很難管理。

我模塊化的store目錄如下：

|-store/   // 存放vuex代碼
| |-eventModule  // 事件模塊
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-themeModule  // 主題顏色模塊
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-index.js  // vuex的核心，創(chuàng)建一個store

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

狀態(tài)管理

接下來，我們來看看vuex完成狀態(tài)管理的一個流程。

舉個栗子：一個待辦事項，勾選之后，會在未完成列表里移除，并在已完成的列表里出現(xiàn)。這個過程，是這個待辦事項的狀態(tài)發(fā)生了改變。勾選的時候，是執(zhí)行了一個方法，那我們就先寫這個方法。在 event_list.vue 文件里新建一個moveToDone方法。

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

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

module.exports = {
 eventdone = ({ commit }, param) =>{
 commit('EVENTDONE',{id: param});
 }
}

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

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

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

const state = {
 event: []
};
export default state;

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

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

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

import * as func from '../function';
import * as actions from './actions.js';
import * as mutations from './mutations.js';
import state from './state.js';
import getters from './getters.js';
module.exports = {
 state,
 getters,
 actions,
 mutations
}

在 store/index.js 里創(chuàng)建一個 store 對象來存放這個module

import Vue from 'vue';
import Vuex from 'vuex';
import event from './eventModule';
Vue.use(Vuex);
module.exports = new Vuex.Store({
 modules: {
 event
 }
});

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

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

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

關(guān)于“Vuex模塊化如何實現(xiàn)待辦事項的狀態(tài)管理”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：Vuex模塊化如何實現(xiàn)待辦事項的狀態(tài)管理-創(chuàng)新互聯(lián)
當(dāng)前URL：http://chinadenli.net/article30/pgepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計、微信公眾號、定制開發(fā)、網(wǎng)站制作、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)