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 GUID生成器实现代码
Oct 31 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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
解析数组非数字键名引号的必要性
2013/08/09 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Random 在 Python 中的使用方法
2018/08/09 Python
浅谈python写入大量文件的问题
2018/11/09 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python matplotlib实时画图案例
2020/04/23 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python 图片处理库exifread详解
2021/02/25 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
教师工作表现评语
2014/12/31 职场文书
项目合作意向书
2015/05/08 职场文书
电影红河谷观后感
2015/06/11 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers
讨论nginx location 顺序问题
2022/05/30 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers