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