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中的作用域
Apr 07 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
vue3中的组件间通信
Mar 31 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实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python字典排序实例详解
2015/05/20 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
python requests 测试代理ip是否生效
2018/07/25 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
倡议书范文
2014/04/16 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
兵马俑的导游词
2015/02/02 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
心理健康教育主题班会
2015/08/13 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
SpringBoot整合Minio文件存储
2022/04/03 Java/Android