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 相关文章推荐
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
vuex实现简易计数器
Oct 27 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
js实现简单的倒计时
Jan 28 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Python图像灰度变换及图像数组操作
2016/01/27 Python
python迭代器与生成器详解
2016/03/10 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
2019年.net常见面试问题
2012/02/12 面试题
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
运动会跳远加油稿
2014/02/20 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
财务部岗位职责范本
2015/04/14 职场文书
护士心得体会范文
2016/01/25 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS