vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)詳解

更新時(shí)間：2018年05月31日 08:45:50 作者：justDoin

本篇文章給大家分享了一個(gè)用vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)的代碼過程，有興趣的朋友跟著參考學(xué)習(xí)下。

vue2.0+vuex+localStorage 待辦事項(xiàng)源碼：https://github.com/Mynameisfwk/vue-Todo-list

參考代碼：https://github.com/Mynameisfwk/vivo-shop

代碼預(yù)覽

vuex官方文檔 https://vuex.vuejs.org/ 我覺的官方文檔說明很詳細(xì)

localStorage 用來本地儲(chǔ)存數(shù)據(jù)

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

項(xiàng)目截圖

項(xiàng)目運(yùn)行

# install dependencies
npm install

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

# build for production with minification
npm run build

您可能感興趣的文章:

相關(guān)文章

Vue中進(jìn)行數(shù)據(jù)緩存的使用示例
數(shù)據(jù)緩存可以提高應(yīng)用程序的性能,減少網(wǎng)絡(luò)請(qǐng)求,提高用戶體驗(yàn),在本文中,我們介紹了Vue中如何進(jìn)行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-09-09
Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-11-11
vue組件name的作用小結(jié)
大家在寫vue項(xiàng)目的時(shí)候會(huì)遇到給組件的各種命名，接下來通過本文給大家分享vue組件name的作用小結(jié)，感興趣的朋友跟隨腳本之家小編一起看看吧
2018-05-05
Vue2路由跳轉(zhuǎn)傳參中文問題處理方案
在el-table中的記錄列表中放置了一個(gè) 操作按鈕,點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁簽,并將通過路由傳參方式將一些信息傳遞到新打開的tab頁簽中,但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn)報(bào)錯(cuò),所以本文給大家介紹了Vue2路由跳轉(zhuǎn)傳參中文問題處理方案,需要的朋友可以參考下
2024-05-05
vuex中五大屬性和使用說明(包括輔助函數(shù))
這篇文章主要介紹了vuex中五大屬性和使用說明(包括輔助函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue2.0 實(shí)現(xiàn)富文本編輯器功能
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
Vue模仿實(shí)現(xiàn)京東商品大圖放大鏡效果
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)京東網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue中路由的前進(jìn)和后退問題
這篇文章主要介紹了vue中路由的前進(jìn)和后退問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
關(guān)于Vue 消除Token過期時(shí)刷新頁面的重復(fù)提示問題
很多朋友在token過期時(shí)刷新頁面，頁面長(zhǎng)時(shí)間未操作，再刷新頁面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧
2021-07-07
vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng)的示例代碼
這篇文章主要給大家介紹了如何通過vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng),文章通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文
2023-08-08