vue + vuex todolist的实现示例代码

todolist demo

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

下载地址 :vue-test_jb51.rar

效果图

根组件

@import './style.scss';

过滤条件组件

@import './style.scss';

添加待办组件

@import './style.scss';

单个待办事项组件

@import './style.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
}

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