vuex通過getters訪問數(shù)據(jù)為undefined問題及解決
getters訪問數(shù)據(jù)為undefined問題
本篇文章可能對你的幫助不大, 只是個人開發(fā)中的一些記錄。不同的業(yè)務和應用場景可能問題不同。
在通過 uni-app 開發(fā)商城時，用戶快捷登錄之后，服務器返回一個 token 數(shù)據(jù)，我將其同步到 vuex module下的 user 模塊中。
然后從登錄頁返回到用戶頁，并發(fā)起 http 請求，獲取用戶的個人信息。
但是在請求時，我會在請求攔截器中獲取 vuex 中的 token 數(shù)據(jù)。如果存在就攜帶到請求頭中和服務器做 OAuth 驗證。如果不存在就直接不攜帶 token。
用戶登錄成功之后，返回到用戶頁發(fā)起請求，但是獲取用戶信息接口是必須做 OAuth 驗證的。問題在于在請求攔截器中 不能通過 vuex 的 getter 正確獲取到 token值，而是返回 undefined。
request.js
import Http from "../xxx/http";
import store from "../sotre";
const request = new Http({
? baseURL: xxxxx,
? timeout: 50000,
? // 省略
});
request.interceptors.request.use((config) => {
? let token, g_t;
? if (
? ? (g_t = store.getters[`user/token`]) ||
? ? (g_t = Storage.get(USER_TOKEN_KEY))
? ) {
? ? token = g_t.token || null;
? }
? if (token) {
? ? config.header["Authorization"] = "Bearer " + token;
? }
? return config;
});問題在于 g_t = store.getters[user/token] 獲取的值為 undefined。
經(jīng)過排查發(fā)現(xiàn)，vuex 中 getters 下的通過 state 獲取的字段實現(xiàn)沒有在 state 中定義。而是通過異步登錄之后，才將其設(shè)置到 user 模塊下的 state 中，使其變?yōu)椴皇琼憫降摹?/p>
寫一個類似例子
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>Title</title>
</head>
<body>
<div id="app">
? <p>姓名: {{ realName }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.3.0/dist/vuex.js"></script>
<script type="module">
? Vue.use(Vuex);
? const store = new Vuex.Store({
? ? state: {},
? ? mutations: {
? ? ? change(state, data) {
? ? ? ? state.name = data;
? ? ? }
? ? },
? ? getters: {
? ? ? name: state => {
? ? ? ? return state.name;
? ? ? }
? ? }
? });
? new Vue({
? ? el: "#app",
? ? store,
? ? data: {
? ? ? message: "Hello"
? ? },
? ? computed: {
? ? ? realName() {
? ? ? ? return this.$store.getters.name;
? ? ? }
? ? },
? ? created() {
? ? ? setTimeout(() => {
? ? ? ? this.$store.commit('change', 'zhangsan');
? ? ? })
? ? }
? })
</script>
</body>
</html>異步代碼執(zhí)行的時候, state 中并沒有 name 屬性。所以一開始 getters 下的 realName 就算是 undefined。異步代碼提交的 commit，在想 state 中新增 name 字段，但是它已不是響應式的。
解決方法：
就是提前在 state 中定義 getters 需要的某些字段，異步變更 state 中的字段它也是響應式的。getters 的值也會進行計算。
getters 類似于 vue 中的計算屬性。
修改上面的代碼為:
const store = new Vuex.Store({
? ? state: {
?? ??? ?name: ""
?? ?},
? ? // 省略...
? }) ?這樣 getters 的值會根據(jù) name的值改變而進行計算。
項目中的代碼比上面的例子更復雜，但是問題是類似的。經(jīng)過排查后才發(fā)現(xiàn)，所以在博客中總結(jié)一下。
小結(jié)：使用 vuex 時, getters 中需要計算的 state 屬性一定要提前聲明，使其成為響應式的值。
vuex getters(組件mounted調(diào)用)使用注意
邏輯
- state存儲數(shù)據(jù)（一開始為空數(shù)據(jù)，通過網(wǎng)絡(luò)請求后更新數(shù)據(jù)）
- 在組件mounted中先調(diào)用actions方法通過mutations更新state數(shù)據(jù)，
- 接著組件mounted在調(diào)用getters 操作state中的數(shù)據(jù)，供組件使用
mounted(){
// 進入組件立即發(fā)送網(wǎng)絡(luò)請求獲取商品信息
this.$store.dispatch('detail/getCommdityInfo',this.skuId)
console.log(this.skuInfo) //為undefined
console.log(this.cateNav) //控制臺報錯
}
state: {
commdityData:{}
},
mutations: {
SET_COMMDITY_LIST(state,value){
state.commdityData = null
// 將商品信息存入組件內(nèi)
state.commdityData = value
console.log('state.commdityData',state.commdityData)
}
},
actions: {
async getCommdityInfo(context,query){
const res = await getCommdityDetail(query)
context.commit('SET_COMMDITY_LIST',res.data.data)
}
},
getters:{
skuInfo:state => state.commdityData.skuInfo,
cateNav:state => {
const {category1Name,category2Name,category3Name} = state.commdityData.categoryView
return [category1Name,category2Name,category3Name]
},
}
結(jié)果報錯：組件在mouted 調(diào)用getters屬性時，getters屬性讀取state數(shù)據(jù)（一開始為空），讀取不到數(shù)據(jù)
**原因：**組件調(diào)用actions執(zhí)行異步網(wǎng)絡(luò)請求，通過mutations更新state數(shù)據(jù)還沒有來得及執(zhí)行
解決方案
更改getters中操作數(shù)據(jù)的屬性，try-catch錯誤處理
cateNav:state => {
// 使用情景，組件在mounted中調(diào)用，getters 的屬性時，此時state未更新；解構(gòu)會出錯，所以要錯誤處理！！
try{
const {category1Name,category2Name,category3Name} = state.commdityData.categoryView
return [category1Name,category2Name,category3Name]
}
catch{
return {}
}
},
！??！注意：在組件的methods中寫方法調(diào)用則可正常使用getters的數(shù)據(jù)?。?/strong>
控制臺輸出：
1：mounted 輸出
2：methods 方法的輸出
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?前端?el-input?實現(xiàn)輸入框內(nèi)容始終添加在尾部%的方法
在el-input輸入框的尾部添加%,可以通過suffix或append插槽實現(xiàn),suffix插槽簡單直接,適用于靜態(tài)顯示%,而append插槽更靈活,適用于顯示更復雜的內(nèi)容,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了jquery和vue對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue @click與@click.native,及vue事件機制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機制的使用分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
之前在網(wǎng)上看到《藍色拼圖》這款小游戲，作者是用jquery寫的。下面通過本文給大家分享基于vue.js編寫藍色拼圖小游戲，一起看看實現(xiàn)代碼吧2017-03-03
使用typescript構(gòu)建Vue應用的實現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應用的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue之動態(tài)class的幾種寫法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue?MVVM雙向綁定實例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時間了,也算對其雙向綁定原理也有了解個大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下2022-03-03