前端空白/红幕报错 undefined

下面是报错，同一情况下，不同的浏览器给出的各种错误:

◎typeerror is undefined

◎Windows. SessionStorage is undefined

◎Module is undefined ,axios...

◎_txc member is undefined 

这些其实都指向一个问题，某个数据是空的。

----------------

情况：我们知道前端可以去后端拿数据，也可以后端传过来后就在前端拿数据，我选择的是前端需要的数据就在前端页面上拿，但前端页面是空的，所以报错 为空异常。

相关代码：

-------------------------------
//  store/index.js

import { createStore } from 'vuex'

const MEMBER = "MEMBER";

export default createStore({
  state: {
    member: window.SessionStorage.get(MEMBER) || {}
  },
  getters: {
  },
  mutations: {
    setMember (state, _member) {
      state.member = _member;
      window.SessionStorage.set(MEMBER, _member);
    }
  },
  actions: {
  },
  modules: {
  }
})

// SessionStorage.js

SessionStorage = {
    get: function (key) {
        var v = sessionStorage.getItem(key);
        if (v && typeof(v) !== "undefined" && v !== "undefined") {
            return JSON.parse(v);
        }
    },
    set: function (key, data) {
        sessionStorage.setItem(key, JSON.stringify(data));
    },
    remove: function (key) {
        sessionStorage.removeItem(key);
    },
    clearAll: function () {
        sessionStorage.clear();
    }
};
----------------------------------------------------------------------------

//vue

  <a-select v-model:value="passenger.type">
          <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">
            {{item.desc}}
          </a-select-option>

  setup() {
    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;
        //省略
}

//enums.js

PASSENGER_TYPE_ARRAY=[{code:"1", desc:"成人"},{code:"2", desc:"儿童"},{code:"3", desc:"学生"}];

解决方法:

主要是两大块同时出现了问题  1. sessionStorage   2.PASSENGER_TYPE_ARRAY

注释掉前端用到这两个东西的地方，修改代码，运行，然后再把注释去掉，再运行。

1. sessionStorage 

store/index.js  先注释掉window.SessionStorage相关内容
运行后端和前端，然后再去掉注释，运行
---------------------------------------------------------------------

import { createStore } from 'vuex'

// const MEMBER = "MEMBER";

export default createStore({
  state: {
      member: {}
   // member: window.SessionStorage.get(MEMBER) || {}
  },
  getters: {
  },
  mutations: {
    setMember (state, _member) {
      state.member = _member;
     // window.SessionStorage.set(MEMBER, _member);
    }
  },
  actions: {
  },
  modules: {
  }
})

SessionStorage.js 全部注释掉
----------------------------
SessionStorage = {
    get: function (key) {
        var v = sessionStorage.getItem(key);
        if (v && typeof(v) !== "undefined" && v !== "undefined") {
            return JSON.parse(v);
        }
    },
    set: function (key, data) {
        sessionStorage.setItem(key, JSON.stringify(data));
    },
    remove: function (key) {
        sessionStorage.removeItem(key);
    },
    clearAll: function () {
        sessionStorage.clear();
    }
};

2.PASSENGER_TYPE_ARRAY

后端本来为key code，然后修改为code desc 导致缓存不一致，获取为空。
分两步，先不修改为code desc，运行；再修改，再运行
-------------------------------------------------------------
-》修改为这样：运行后，打开前端查看，再改回去运行，就可以了。
//vue

  <a-select v-model:value="passenger.type">
          <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.key" :value="item.key">
            {{item.code}}
          </a-select-option>

  setup() {
    const PASSENGER_TYPE_ARRAY = [{key:"1", code:"成人"},{key:"2", code:"儿童"},{key:"3", code:"学生"}];
        //省略
}

//enums.js

PASSENGER_TYPE_ARRAY=[{key:"1", code:"成人"},{key:"2", code:"儿童"},{key:"3", code:"学生"}];
---------------------------------------------------------------------
改回去：

//vue

  <a-select v-model:value="passenger.type">
          <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">
            {{item.desc}}
          </a-select-option>

  setup() {
    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;
        //省略
}

//enums.js

PASSENGER_TYPE_ARRAY=[{code:"1", desc:"成人"},{code:"2", desc:"儿童"},{code:"3", desc:"学生"}];