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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
语义化 H1 标签
Jan 14 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
javascript快速排序算法详解
Sep 17 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
硕士研究生求职自荐信范文
2014/03/11 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
暑假生活随笔
2015/08/15 职场文书
节水宣传标语口号
2015/12/26 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书