用vue2.0+vuex+localStorage擼個代辦事項小應用

Karuru 發布于2019-08-26 11:56 / 3256人閱讀

摘要：寫在前面這個雖然功能少，但是知識點大部分都在這里面了，麻雀雖小五臟內全應用項目地址傳送門代辦事項地址在這里這是用寫的商城高仿商城地址在這里如果你覺的對你有幫助幫忙點個謝謝感謝大佬前端交流群志同道合的可以加下一起學習代碼預覽官方文檔我覺的官方

寫在前面

這個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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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