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实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP中的表达式简述
2016/05/29 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
tensorflow常用函数API介绍
2020/04/19 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
服装店营销方案
2014/03/10 职场文书
家长写给老师的建议书
2014/03/13 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
基于python实现银行管理系统
2021/04/20 Python