Vue使用Vuex Getter时提示渲染期间访问属性未在实例上定义如何解决

问题原因 #

你在组件computed选项中定义/映射的计算属性名称为getFoo，但模板内v-if调用的是名称为foo的属性，两者命名不匹配，Vue无法在实例上找到foo属性，因此抛出对应警告，该问题和Vuex配置、getter映射的写法本身无关。

解决方案 #

可根据需求选择以下任意一种方案：

• 方案1：修改模板调用的属性名，和computed定义保持一致
  将模板中的判断条件改为已定义的getFoo即可：

<template>
      <template v-if="getFoo">
         <span>Bar</span>
      </template>
</template>

• 方案2：修改computed映射的属性名，和模板调用的foo保持一致
  • 使用mapGetters时可以通过对象写法给getter重命名：

  computed: {
     ...mapGetters({
        foo: 'getFoo'
     })
  }
  

  • 手动写计算属性时直接将属性名改为foo：

  computed: {
     foo() {
       return this.$store.getters.getFoo;
     }
  }
  

• 方案3：直接映射state属性（无额外逻辑时更简便）
  如果getFoo getter仅做返回state.foo的基础操作、没有其他处理逻辑，可以直接用mapState映射state的foo属性，无需走getter：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['foo'])
  }
}

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