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


Posted in Javascript onMarch 15, 2017

前言

在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B。当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的。vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯。

项目介绍

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

待办事项中的一个事件,它可能拥有几个状态,未完成、已完成、已取消或被删除等。这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常方便的。

来看一下vuex怎么完成状态管理的:

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

所有组件都是调用actions,分发mutation去修改state,然后state经过getter又更新到各个组件里。state又通过localStorage存储数据到本地,下次重新打开时再读取保存的数据。

模块化

为什么要用模块化?当我们的项目比较大,组件很多,功能也多,会导致state里要存放很多内容,整个 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的核心,创建一个store

可以看到,每个模块拥有自己的state、mutation、action、getter,这样子我们就可以把我们的项目根据功能划分为多个模块去使用vuex了,而且后期维护也不会一脸懵逼。

状态管理

接下来,我们来看看vuex完成状态管理的一个流程。

举个栗子:一个待办事项,勾选之后,会在未完成列表里移除,并在已完成的列表里出现。这个过程,是这个待办事项的状态发生了改变。勾选的时候,是执行了一个方法,那我们就先写这个方法。在 event_list.vue 文件里新建一个moveToDone方法。

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

在 moveToDone 方法中通过 store.dispatch 方法触发 action, 接下来我们在 eventModule/actions.js 中来注册这个 action, 接受一个 id 的参数。

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

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

通过 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 里创建一个 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 来获取到这个从未完成的状态改变到已完成的状态,我们要用到 store 这个对象里的getters

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

这样子,完成了 '未完成' => '已完成' 从提交修改到更新视图读取的整个流程,也是 vuex 工作的整个流程。通过 module 的封装,更加方便多模块项目的开发和维护。

源码地址 :notepad

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 #Javascript
轻松理解JavaScript之AJAX
Mar 15 #Javascript
jQuery插件ContextMenu自定义图标
Mar 15 #Javascript
JavaScript对象引用与赋值实例详解
Mar 15 #Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
详解如何修改python中字典的键和值
2020/09/29 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
客服文员岗位职责
2013/11/29 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
六年级学生评语
2014/04/22 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
政风行风建设责任书
2014/07/23 职场文书
管辖权异议上诉状
2015/05/23 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python