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的动态添加控件并取值的实现代码
Sep 24 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
10个实用的PHP代码片段
2011/09/02 PHP
PHP分享图片的生成方法
2018/04/25 PHP
php提取微信账单的有效信息
2018/10/01 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
Python Trie树实现字典排序
2014/03/28 Python
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python实现partial改变方法默认参数
2014/08/18 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
django Admin文档生成器使用详解
2019/07/22 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
公司离职证明范本
2014/10/17 职场文书
分家协议书范本
2016/03/22 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书