在Nuxt页面中通过Vuex Getter初始化data失败的问题咨询

为什么原写法会报错？ #

核心问题是Vue组件的初始化顺序：

• data的执行时机在组件实例创建的早期，此时computed属性还没被挂载到实例上。你在data里访问this.currentPlayer时，这个从Vuex映射来的computed getter根本不存在，this.currentPlayer是undefined。
• 这时候访问this.currentPlayer.logo会直接抛出“无法读取undefined的logo属性”的错误，导致logo变量无法正常初始化，最终渲染时就会提示logo未定义。
• 退一步说，就算没报错，data里的logo是一次性赋值的，后续currentPlayer更新时，logo也不会自动同步，完全失去了响应性。

两种可行的解决方式 #

方式一：把logo也做成computed属性（推荐） #

既然logo完全依赖于currentPlayer.logo，直接用computed属性是最合理的，既解决了顺序问题，又能自动响应currentPlayer的变化：

export default {
  computed: {
    ...mapGetters({
      currentPlayer: 'players/current',
    }),
    logo() {
      // 用可选链操作符避免currentPlayer未加载时的报错
      return this.currentPlayer?.logo
    }
  },
}

方式二：在created钩子中初始化data（适合必须用data存储的场景） #

如果一定要把logo存在data里，就等到组件实例创建完成（此时computed已经挂载）后再赋值，还可以加watch监听变化：

export default {
  data() {
    return {
      logo: null,
    }
  },
  computed: {
    ...mapGetters({
      currentPlayer: 'players/current',
    }),
  },
  created() {
    // created钩子中可以正常访问computed属性
    this.logo = this.currentPlayer?.logo
  },
  // 监听currentPlayer的变化，实时更新logo
  watch: {
    currentPlayer(newPlayer) {
      this.logo = newPlayer?.logo
    }
  }
}

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