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。

經過排查發(fā)現，vuex 中 getters 下的通過 state 獲取的字段實現沒有在 state 中定義。而是通過異步登錄之后，才將其設置到 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 的值會根據 name的值改變而進行計算。

項目中的代碼比上面的例子更復雜，但是問題是類似的。經過排查后才發(fā)現，所以在博客中總結一下。

小結：使用 vuex 時, getters 中需要計算的 state 屬性一定要提前聲明，使其成為響應式的值。

vuex getters(組件mounted調用)使用注意

邏輯

state存儲數據（一開始為空數據，通過網絡請求后更新數據）
在組件mounted中先調用actions方法通過mutations更新state數據，
接著組件mounted在調用getters 操作state中的數據，供組件使用

mounted(){
    // 進入組件立即發(fā)送網絡請求獲取商品信息
    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
      // 將商品信息存入組件內
      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]
    },
    
  }

結果報錯：組件在mouted 調用getters屬性時，getters屬性讀取state數據（一開始為空），讀取不到數據

**原因：**組件調用actions執(zhí)行異步網絡請求，通過mutations更新state數據還沒有來得及執(zhí)行

解決方案

更改getters中操作數據的屬性，try-catch錯誤處理

cateNav:state => {
      // 使用情景，組件在mounted中調用，getters 的屬性時，此時state未更新；解構會出錯，所以要錯誤處理??！
      try{
        const {category1Name,category2Name,category3Name} = state.commdityData.categoryView 
        return [category1Name,category2Name,category3Name]
      }
      catch{
        return {}
      }
    },

！??！注意：在組件的methods中寫方法調用則可正常使用getters的數據??！

控制臺輸出：

1：mounted 輸出

2：methods 方法的輸出