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实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
JavaScript接口实现方法实例分析
May 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
PHP通用检测函数集合
2006/11/25 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python subprocess模块详细解读
2018/01/29 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python格式化日期时间操作示例
2018/06/28 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python写入文件自动换行问题的方法
2019/07/05 Python
简单了解python的内存管理机制
2019/07/08 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python中def是做什么的
2020/06/10 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
UNIX命令速查表
2012/03/10 面试题
品质保证书格式
2015/02/28 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers