Vue使用Axios.get从Imgur拉取图片时token未定义及图片不显示问题

问题1：Property "token" was accessed during render but is not defined on instance 报错修复 #

触发原因是你在某组件模板中直接使用了token变量，但没有在对应组件的实例上定义该属性，按如下步骤排查修改：

1. 先确认Vuex已正确注册auth模块，示例store入口配置：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import images from './modules/images'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: { auth, images }
})

2. 如果确实需要在模板中使用token，在对应组件中通过mapState映射token为计算属性：

// 用到token的组件script部分
import { mapState } from 'vuex'
export default {
  // 原有配置
  computed: {
    ...mapState('auth', ['token']),
    // 原有其他计算属性，比如之前的mapGetters
  }
}

3. 如果不需要在模板中使用token，直接删掉所有模板中多余的token变量引用即可。

问题2：图片src显示为function link() { [native code] } 修复 #

触发原因是imgur.js中调用的Imgur接口地址拼写错误，原代码写的是单数/image/，正确的获取用户图片接口是复数/images，修改如下：

// imgur.js fetchImages方法修改
fetchImages(token) {
    return axios.get(`${ROOT_URL}/3/account/me/images`, { // 把image改为images
        headers: {
            Authorization: `Bearer ${token}`
        }
    });
},

之前请求错误接口返回的结构不是预期的图片数组，遍历的元素没有link字段，JS原型链向上查找触发了原生link方法，才会输出函数内容。修改接口地址后返回的结构中每个图片对象的link字段就是有效的图片地址，可正常渲染。

补充优化建议 #

可以在调用拉取图片接口前加登录状态判断，避免未登录时token为空引发接口报错：

// Galleries.vue created钩子修改
created() {
  if (this.$store.getters.isLoggedIn) {
    this.fetchImages()
  } else {
    this.$store.dispatch('login')
  }
}

内容的提问来源于stack exchange，提问作者Refael