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实现文字放大效果的方法
Mar 03 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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/06/30 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
对联广告js flash激活
2006/10/19 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
tensorflow更改变量的值实例
2018/07/30 Python
python tkinter界面居中显示的方法
2018/10/11 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
pycharm的python_stubs问题
2020/04/08 Python
Python异常处理机制结构实例解析
2020/07/23 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
追悼会子女答谢词
2014/01/28 职场文书
党支部承诺书范文
2014/03/28 职场文书
辞职书格式样本
2015/02/26 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
美丽心灵观后感
2015/06/01 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python