vue + vuex todolist的实现示例代码

vue + vuex todolist的实现示例代码

todolist demo

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

下载地址 :vue-test_jb51.rar

效果图

根组件

:types='types'

:filter='filter'

:handleUpdateFilter='handleUpdateFilter'

/>

v-for='(item,index) in list'

:key='item.id'

:index='index'http://

:data='item'

:filter='filter'

:handleRemove='handleRemove'

:handleToggle='handleToggle'

/>

:types='types'

:filter='filter'

:handleUpdateFilter='handleUpdateFilter'

/>

v-for='(item,index) in list'

:key='item.id'

:index='index'http://

:data='item'

:filter='filter'

:handleRemove='handleRemove'

:handleToggle='handleToggle'

/>

v-for='(item,index) in list'

:key='item.id'

:index='index'http://

:data='item'

:filter='filter'

:handleRemove='handleRemove'

:handleToggle='handleToggle'

/>

过滤条件组件

v-for='(item,index) in types'

:key='index + item'

:class='filterClass(item)'

@click='handleUpdateFilter(item)'

>{{item}}

添加待办组件

type='text'

name='add-todo'

id='add-todo-input'

class='add-todo'

@keyup.enter='add'

placeholder='input then hit enter'

/>

单个待办事项组件

:class='messageClass(data.status)'

@click='handleToggle(data.id)'

>{{index+1}}. {{data.message}}{{dateFormat(data.id)}}

:class='messageClass(data.status)'

@click='handleToggle(data.id)'

>{{index+1}}. {{data.message}}{{dateFormat(data.id)}}

class='delete'

@click='handleRemove(data.id)'

>Delete

class='delete'

@click='handleRemove(data.id)'

>Delete

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

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。