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实现的分页函数
Feb 07 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
javascript操作表格排序实例分析
May 06 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JSONP跨域请求
Mar 02 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 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
我的论坛源代码(三)
2006/10/09 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php bootstrap实现简单登录
2016/03/08 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python中的itertools的使用详解
2020/01/13 Python
tensorflow 查看梯度方式
2020/02/04 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
大学生怎样进行自我评价
2013/12/07 职场文书
摄影助理岗位职责
2014/02/07 职场文书
自我鉴定书
2014/03/24 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
听证会主持词
2015/07/03 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Golang 实现WebSockets
2022/04/24 Golang