vue使用$store.commit() undefined報(bào)錯(cuò)的解決
vue使用$store.commit() undefined報(bào)錯(cuò)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘commit’)
這里我想把token和userInfo分別存入sessionStorage和LocalStorage中，登錄提交的時(shí)候報(bào)commit undefined
問(wèn)題所在，我們沒(méi)有在全局中配置store，解決辦法如下
在main.js中配置store即可
成功存儲(chǔ)
vuex的this.$store.commit
在這里將介紹store的mutations和modules模塊化…
簡(jiǎn)單的vue項(xiàng)目，父子組件之間的數(shù)據(jù)傳遞可以使用props或者$emit等方式傳遞，大中型項(xiàng)目，需要在不相關(guān)的平行組件之間傳遞數(shù)據(jù)，并且很多數(shù)據(jù)需要多個(gè)組件循環(huán)使用。
再使用上面方式會(huì)讓項(xiàng)目代碼冗余，不利于組件復(fù)用。
modules模塊化
當(dāng)項(xiàng)目比較大時(shí)，一個(gè)store數(shù)據(jù)會(huì)非常多而雜，不易管理?？梢越⒍鄠€(gè)“子倉(cāng)庫(kù)”，分別對(duì)應(yīng)不同模塊做數(shù)據(jù)的讀取和操作。
1、在store下新建modules文件夾，在modules下新建user.js和common.js兩個(gè)"子倉(cāng)庫(kù)"。
2、common.js管理主頁(yè)下的數(shù)據(jù)，user.js管理用戶信息數(shù)據(jù)：
3、將“子倉(cāng)庫(kù)"掛載到主倉(cāng)庫(kù)：
在main.js文件中注冊(cè)store
這樣就可以在任意組件中使用store中的數(shù)據(jù)，即使用計(jì)算屬性返回store中的數(shù)據(jù)到一個(gè)新屬性上，然后在模板中使用這個(gè)屬性值：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了基于vue手寫(xiě)tree插件的那點(diǎn)事兒，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue清除瀏覽器全部cookie的問(wèn)題及解決方法(絕對(duì)有效!)
最近項(xiàng)目要實(shí)現(xiàn)關(guān)閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關(guān)于vue清除瀏覽器全部cookie的問(wèn)題及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue實(shí)現(xiàn)簡(jiǎn)單搜索功能的示例代碼
在vue項(xiàng)目中，搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景，最常用的是在列表數(shù)據(jù)中搜索一個(gè)想要的，今天的例子就是我們實(shí)現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對(duì)大家有所幫助2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
前端儲(chǔ)存之localStrage、sessionStrage和Vuex使用
localStorage、sessionStorage和Vuex是三種不同的客戶端存儲(chǔ)方式,用于在瀏覽器中保存數(shù)據(jù),localStorage和sessionStorage都是以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù),但localStorage存儲(chǔ)的數(shù)據(jù)在關(guān)閉瀏覽器后仍然存在2025-01-01
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個(gè)方法，它主要用于DOM操作，當(dāng)我們修改Vue組件中的數(shù)據(jù)時(shí)，Vue.js會(huì)在下次事件循環(huán)前自動(dòng)更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05
vant中的picker選擇器自定義選項(xiàng)內(nèi)容
這篇文章主要介紹了vant中的picker選擇器自定義選項(xiàng)內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
如何使用vue slot創(chuàng)建一個(gè)模態(tài)框的實(shí)例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個(gè)模態(tài)框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05