欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue + vuex todolist的实现示例代码

程序员文章站 2022-09-26 13:55:12
todolist demo 最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法. 下载地址 :...

todolist demo

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

下载地址 :

效果图

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
}

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