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 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php数组使用规则分析
2015/02/27 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
js实现文字滚动效果
2016/03/03 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
python实现的系统实用log类实例
2015/06/30 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
学习和使用python的13个理由
2019/07/30 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
教师通用专业自荐书范文
2014/02/11 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
人力资源部岗位职责
2015/02/11 职场文书
信用卡收入证明范本
2015/06/12 职场文书