vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)詳解
更新時間:2018年05月31日 08:45:50 作者:justDoin
本篇文章給大家分享了一個用vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)的代碼過程,有興趣的朋友跟著參考學(xué)習(xí)下。
vue2.0+vuex+localStorage 待辦事項源碼:https://github.com/Mynameisfwk/vue-Todo-list
參考代碼:https://github.com/Mynameisfwk/vivo-shop
代碼預(yù)覽
vuex官方文檔 https://vuex.vuejs.org/ 我覺的官方文檔說明很詳細(xì)
localStorage 用來本地儲存數(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
項目截圖
項目運行
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
您可能感興趣的文章:
- vuex存儲復(fù)雜參數(shù)(如對象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
- Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
- 使用vuex存儲用戶信息到localStorage的實例
- Vue項目使用localStorage+Vuex保存用戶登錄信息
- 詳解vuex結(jié)合localstorage動態(tài)監(jiān)聽storage的變化
- 基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
- vuex存儲數(shù)組(新建,增,刪,更新)并存入localstorage定時刪除功能實現(xiàn)
相關(guān)文章
如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關(guān)資料,需要的朋友可以參考下2024-03-03vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Element-Plus Select組件實現(xiàn)滾動分頁加載功能
Element-Plus的select組件并沒有自帶滾動分頁加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁及下一頁操作按鈕的方式進行分頁加載切換,這篇文章主要介紹了Element-Plus Select組件實現(xiàn)滾動分頁加載功能,需要的朋友可以參考下2024-03-03