Vuex模块化实现待办事项的状态管理

|-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的核心，创建一个store

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

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

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);  // 把该事件在数组中删除
  break;
  }
 }
 states.event.unshift(item);   // 把该事件存到数组的第一个元素
 local.set(states);    // 将整个状态存到本地
 }
}

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

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

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
}

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

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