资讯专栏INFORMATION COLUMN

vue + vuex todolist demo

CarterLi / 693人阅读

摘要:最近有空重新看了一下然后又写了一个小原理比较简单主要是自己规范了一下代码的写法地址效果图根组件过滤条件组件添加待办组件单个待办事项组件部分模块

todolist demo
最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.
gitee地址 : https://gitee.com/darcrandex/...
效果图

根组件





过滤条件组件





添加待办组件





单个待办事项组件





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
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93280.html

相关文章

  • Vue搭建一个应用盒子(一):todo-list

    摘要:最近在研究的相关知识,最好的学习方法莫过于自己开发一个,这样带着问题来学习,进步自然飞速。在首页里,我们会用写一个导航,通过的路由导航到不同的应用。我们在文件夹里创建一个新的组件。 最近在研究vue的相关知识,最好的学习方法莫过于自己开发一个SPA,这样带着问题来学习,进步自然飞速。于是边查边写差不多花了2周写完了一个todo-list,功能不够完备,但是麻雀虽小,却也是五脏俱全,基本...

    MAX_zuo 评论0 收藏0
  • 应用vue2+vuex+vue-router+webpack2+es6+express+mysql技

    摘要:其实这里还是有漏洞的,坐等高手指出来微笑脸后台没有用生成一个完整的架构。来自不同视图的行为需要变更同一状态。 最近对vue很感兴趣,趁闲暇时间,模仿了wunderlist里面的部分功能,编写了前后端分离的基于vue技术栈和express的todolist小项目。写这篇博文来总结思考下。项目所在github,可以自行参考克隆。 本人博客 总体概览 整个项目最终做成的样子如下: showI...

    voidking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<