Vue中使用对象自身属性创建新属性时出现TypeError问题求助

错误原因 #

你在初始化backendUrls对象时直接用this.baseUrl和this.pathParts.house拼接houseUrl，但对象字面量初始化阶段，内部的this并不指向当前正在创建的backendUrls对象，此时this.pathParts是undefined，自然会抛出Cannot read properties of undefined (reading 'house')的错误。如果这是在Vue组件的data选项中，情况更糟——data函数返回对象前，this也不是组件实例，根本无法访问到baseUrl这类属性。

针对Vue组件的解决方案 #

如果这是Vue组件内的配置，推荐用计算属性来生成拼接后的URL，计算属性会自动依赖数据源并在其变化时更新：

export default {
  data() {
    return {
      backendUrls: {
        pathParts: {
          house: '/house',
          office: '/office'
        },
        baseUrl: 'http://localhost:8080'
      }
    }
  },
  computed: {
    houseUrl() {
      return this.backendUrls.baseUrl + this.backendUrls.pathParts.house
    }
  }
}

之后在模板或组件逻辑中直接使用this.houseUrl即可。

针对独立配置文件的解决方案 #

如果这是单独的API配置文件，有两种常用写法：

写法1：先拆分基础变量再拼接 #

先定义基础的路径和地址，再组合成完整URL，逻辑清晰且初始化时就能拿到正确值：

// 先定义基础部分
const pathParts = {
  house: '/house',
  office: '/office'
}
const baseUrl = 'http://localhost:8080'

// 再组合成配置对象
const backendUrls = {
  pathParts,
  baseUrl,
  houseUrl: baseUrl + pathParts.house
}

写法2：使用getter属性 #

如果需要houseUrl能动态响应baseUrl或pathParts的变化，可以用对象的getter属性，每次访问时都会重新计算：

const backendUrls = {
  pathParts: {
    house: '/house',
    office: '/office'
  },
  baseUrl: 'http://localhost:8080',
  // 用getter动态计算
  get houseUrl() {
    return this.baseUrl + this.pathParts.house
  }
}

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