vue2.0+vuex+localStorage代办事项应用实现详解


Posted in Javascript onMay 31, 2018

vue2.0+vuex+localStorage 待办事项源码:https://github.com/Mynameisfwk/vue-Todo-list

参考代码:https://github.com/Mynameisfwk/vivo-shop

代码预览

vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细

localStorage 用来本地储存数据

const state={
 home:localStorage["home"]?JSON.parse(localStorage["home"]): [],
 item:localStorage["item"]?JSON.parse(localStorage["item"]): [],
}

export default state
const mutations={
 
 [types.SET_SHIXIANG](state,data){
  state.home.push(data)
  localStorage.setItem("home",JSON.stringify(state.home));
 },
 
 [types.SET_YES](state,data){
  state.item.push(data)
  localStorage.setItem("item",JSON.stringify(state.item));
 }
}

export default mutations
const actions={
 setOrder ({commit}, data) {
  commit('SET_SHIXIANG', data);
 },
 setYes({commit},data){
  commit('SET_YES',data)
 }
}
export default actions

项目截图

vue2.0+vuex+localStorage代办事项应用实现详解

vue2.0+vuex+localStorage代办事项应用实现详解

项目运行

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
Javascript 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 #Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 #Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 #Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
Vue2.0 实现移动端图片上传功能
May 30 #Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
Javascript获取某个月的天数
May 30 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP中的session安全吗?
2016/01/22 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
YII框架关联查询操作示例
2019/04/29 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python中的闭包总结
2014/09/18 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python 求数组局部最大值的实例
2019/11/26 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
禁烟标语大全
2014/06/11 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
股份合作协议书
2014/09/10 职场文书
2015新年寄语大全
2014/12/08 职场文书
统招统分证明
2015/06/23 职场文书
运动会新闻稿
2015/07/17 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis