这篇文章主要介绍了vue + vuex todolist的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
todolist demo
最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.
下载地址 :vue-test_jb51.rar
效果图
根组件
<div class='container'> <h1 class='title'>todo list demo</h1></div> @import './style.scss';
过滤条件组件
<ul class='types'> <li>{{item}}</li></ul> @import './style.scss';
添加待办组件
@import './style.scss';
单个待办事项组件
<p class='todo-item'> <span>{{index+1}}. {{data.message}}<i class='date'>{{dateFormat(data.id)}}</i></span><span class='delete'>Delete</span></p> @import './style<b>本文来源gao@!dai!ma.com搞$$代^@码!网</b>.scss';
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 }
以上就是vue + vuex todolist的实现示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue + vuex todolist的实现示例代码
转载请注明原文链接：vue + vuex todolist的实现示例代码
