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

Mynameisfwk發表於2018-05-30
Vue

寫在前面

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

複製程式碼

專案截圖

用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
複製程式碼

寫在最後

前端實習生一枚，做的不好，還望大佬嘴下留情 輕噴 大佬我想要個star

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

相關文章