用vue2.0+vuex+localStorage撸个代办事项小应用

Karuru 发布于2019-08-26 11:56 / 3216人阅读

摘要：写在前面这个虽然功能少，但是知识点大部分都在这里面了，麻雀虽小五脏内全应用项目地址传送门代办事项地址在这里这是用写的商城高仿商城地址在这里如果你觉的对你有帮助帮忙点个谢谢感谢大佬前端交流群志同道合的可以加下一起学习代码预览官方文档我觉的官方

写在前面

这个demo虽然功能少，但是vuex知识点大部分都在这里面了，麻雀虽小五脏内全

应用项目地址传送门代办事项地址在这里

这是用vue2.0写的商城高仿vivo商城地址在这里

如果你觉的对你有帮助帮忙点个star谢谢感谢大佬！

前端交流群740625675 志同道合的可以加下一起学习！

代码预览

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

项目截图

项目运行

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

写在最后

前端实习生一枚，做的不好，还望大佬嘴下留情轻喷大佬我想要个star

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107850.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Markcook2.0，使用Vue2.0和Vuex2.0进行完全重构升级

摘要：新版本允许多任务操作，这意味着你可以通过同时打开多个文件，在侧边栏中可以方便地进行切换你可以通过拖拽文件的方式把文件直接添加到的工作空间当中最大的变化，在于工具栏的升级。 showImg(https://segmentfault.com/img/bVDNjH?w=513&h=170); 随着Vue2.0的正式推出，我也正好籍此机会对我的开源项目Markcook进行重构。这一次重构既打发...

mrcode 2019-08-20 11:28 评论0 收藏0
ES6—项目小练习-TodoList(15)

摘要：切换状态其实就是对应的数组值取反。要会写这个项目的和，注意实际项目中的引入方式。学习的思想，尝试使用通过修改数组的方式实现任务的增加删除和修改功能。 ES6技术本身非常容易，相信大家也体会到了。各种新特性都不难，但是为什么很多人学习起来困难呢？其实ES6难的不是技术，而是实际工作环境的搭建。比如我们想写一个简单的ES6版本的TodoList. 很多同学学生是这么放弃的：通过搜索引擎...

iOS122 2019-08-26 13:52 评论0 收藏0