todolist demo
成都创新互联公司专注于萨嘎网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供萨嘎营销型网站建设,萨嘎网站制作、萨嘎网页设计、萨嘎网站官网定制、微信小程序定制开发服务,打造萨嘎网络公司原创品牌,更为您提供萨嘎网站排名全网营销落地服务。
最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.
下载地址 :vue-test_jb51.rar
效果图
根组件
todo list demo
过滤条件组件
- {{item}}
添加待办组件
单个待办事项组件
{{index+1}}. {{data.message}}{{dateFormat(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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。