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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
javascript 自定义事件初探
Aug 21 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Angular2自定义分页组件
Apr 19 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
函数指针的定义是什么
2016/08/14 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
职位说明书范文
2014/05/07 职场文书
自强之星事迹材料
2014/05/12 职场文书
五一口号
2014/06/19 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
房租涨价通知
2015/04/23 职场文书
告知书格式
2015/07/01 职场文书
初中语文教师研修日志
2015/11/13 职场文书
投资入股协议书
2016/03/22 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL