vue2.0+vuex+localStorage代办事项应用实现详解

2022-01-13,,,,

本篇文章给大家分享了一个用vue2.0+vuex+localStorage代办事项应用实现的代码过程,有兴趣的朋友跟着参考学习下。

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

项目截图

项目运行

 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build

以上就是vue2.0+vuex+localStorage代办事项应用实现详解的详细内容,更多请关注本站其它相关文章!

《vue2.0+vuex+localStorage代办事项应用实现详解.doc》

下载本文的Word格式文档,以方便收藏与打印。