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隐藏控件的方法
Sep 21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
vue.js开发环境搭建教程
May 04 Javascript
实现高性能javascript的注意事项
May 27 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
python实现textrank关键词提取
2018/06/22 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python函数定义和调用过程详解
2020/02/09 Python
python 安装impala包步骤
2020/03/28 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
汇源肾宝广告词
2014/03/20 职场文书
省文明单位申报材料
2014/05/08 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
小学六一主持词开场白
2015/05/28 职场文书