vue + vuex todolist的实现示例代码


Posted in Javascript onMarch 09, 2018

todolist demo

最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.

下载地址 :vue-test_3water.rar

效果图

vue + vuex todolist的实现示例代码

根组件

<template>
 <div class='container'>
 <h1 class='title'>todo list demo</h1>
 <type-filter
 :types='types'
 :filter='filter'
 :handleUpdateFilter='handleUpdateFilter'
 />
 <add-todo :handleAdd='handleAdd' />
 <todo-item
 v-for='(item,index) in list'
 :key='item.id'
 :index='index'
 :data='item'
 :filter='filter'
 :handleRemove='handleRemove'
 :handleToggle='handleToggle'
 />
 </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import TypeFilter from './filter'
import AddTodo from './addTodo'
import TodoItem from './item'

const { mapState, mapMutations } = createNamespacedHelpers('TodoList')
export default {
 name: 'todo-list-demo',
 components: { TypeFilter, TodoItem, AddTodo },
 computed: {
 ...mapState(['list', 'types', 'filter'])
 },
 methods: {
 ...mapMutations([
 'handleAdd',
 'handleRemove',
 'handleToggle',
 'handleUpdateFilter'
 ])
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

过滤条件组件

<template>
 <ul class='types'>
 <li
 v-for='(item,index) in types'
 :key='index + item'
 :class='filterClass(item)'
 @click='handleUpdateFilter(item)'
 >{{item}}</li>
 </ul>
</template>

<script>
export default {
 name: 'type-filter',
 props: ['types', 'filter', 'handleUpdateFilter'],
 methods: {
 filterClass(filter) {
 return { filter: true, active: filter === this.filter }
 }
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

添加待办组件

<template>
 <input
 type='text'
 name='add-todo'
 id='add-todo-input'
 class='add-todo'
 @keyup.enter='add'
 placeholder='input then hit enter'
 />
</template>

<script>
export default {
 name: 'add-todo',
 props: ['handleAdd'],
 methods: {
 add(e) {
 const val = e.target.value.trim()
 if (val) {
 this.handleAdd({
  id: new Date().getTime(),
  message: val,
  status: false
 })
 e.target.value = ''
 }
 }
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

单个待办事项组件

<template>
 <p v-if='show' class='todo-item'>
 <span
 :class='messageClass(data.status)'
 @click='handleToggle(data.id)'
 >{{index+1}}. {{data.message}}<i class='date'>{{dateFormat(data.id)}}</i></span>
 <span
 class='delete'
 @click='handleRemove(data.id)'
 >Delete</span>
 </p>
</template>

<script>
export default {
 name: 'todo-items',
 props: ['data', 'filter', 'index', 'handleRemove', 'handleToggle'],
 computed: {
 show() {
 return (
 this.filter === 'ALL' ||
 (this.filter === 'UNDO' && !this.data.status) ||
 (this.filter === 'DONE' && this.data.status)
 )
 }
 },
 methods: {
 dateFormat(time) {
 const date = new Date(time)
 return `(${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()})`
 },
 messageClass: status => ({ message: true, done: status })
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

vuex部分(模块)

const state = {
 list: [],
 types: ['ALL', 'UNDO', 'DONE'],
 filter: 'ALL'
}
const mutations = {
 handleAdd(state, item) {
 state.list = [...state.list, item]
 },
 handleRemove(state, id) {
 state.list = state.list.filter(obj => obj.id !== id)
 },
 handleToggle(state, id) {
 state.list = state.list.map(
 obj => (obj.id === id ? { ...obj, status: !obj.status } : obj)
 )
 },
 handleUpdateFilter(state, filter) {
 state.filter = filter
 }
}
export default {
 namespaced: true,
 state,
 mutations
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
11行JS代码制作二维码生成功能
Mar 09 #Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 #Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 #Javascript
vue注册组件的几种方式总结
Mar 08 #Javascript
You might like
PHP5 安装方法
2007/01/15 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Python 递归函数详解及实例
2016/12/27 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python批量修改图片大小的方法
2018/07/24 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python实现拼接图片
2020/03/23 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
某公司.Net方向面试题
2014/04/24 面试题
新闻专业应届生求职信
2013/10/31 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
学校十一活动方案
2014/02/01 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
绘画专业自荐信
2014/07/04 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书