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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js控制div弹出层实现方法
May 11 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
js实现进度条的方法
2015/02/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue实现信息管理系统
2020/05/30 Javascript
python中__call__内置函数用法实例
2015/06/04 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
2014学年自我鉴定
2014/02/23 职场文书
土地转让协议书
2014/09/27 职场文书
六查六看心得体会
2014/10/14 职场文书
大学生读书笔记范文
2015/07/01 职场文书
团结主题班会
2015/08/13 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书