这篇文章主要介绍了vue + vuex todolist的实现示例代码，我觉得挺不错的，现在分享给大家，也给大家做个参考。
todolist demo
最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.
下载地址 :vue-test_jb51.rar
效果图
根组件
<template>
<p 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'
/>
</p>
</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
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
jquery实现的回车触发按钮事件功能示例
jquery+cookie实现切换皮肤功能
angular 组件之间的交互的示例代码
以上就是通过vue + vuex这2样技术实现todolist（详细教程）的详细内容。