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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
深入浅析react native es6语法
Dec 09 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python如何操作docker redis过程解析
2020/08/10 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
如何写求职信
2014/05/24 职场文书
学党史心得体会
2014/09/05 职场文书
技术股东合作协议书
2014/12/02 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Java字符串逆序方法详情
2022/03/21 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏