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.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
详解Angular 4.x Injector
May 04 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python字符串连接方法分析
2016/04/12 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
教师党员承诺书2015
2015/01/21 职场文书
长江三峡导游词
2015/01/31 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
食品安全责任书范本
2015/05/09 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python