Vuex报错this.getUser is not a function解决及用户登出如何清空Vuex store

开发者阿泽

2026-9-24

报错原因与修复方案

错误根因

你将getUser声明为计算属性，Vue中计算属性默认是getter访问器，属于属性而非方法，不能加()执行调用，你在mounted钩子中写的this.getUser()是错误写法。

修复步骤

修正mounted钩子中的逻辑，计算属性会自动响应Vuex中user的变化，不需要主动调用，直接读取属性即可（不要加括号）：

mounted() {
        if (authHelper.validAuthentication()) {
            // 直接读取计算属性即可，不需要加()执行
            console.log(this.getUser)
        }
        EventBus.$on(GENERAL_APP_CONSTANTS.Events.CheckAuthentication, () => {
            this.authenticated = authHelper.validAuthentication();
        });
    },
    computed: {
        getUser() {
            return this.$store.state.user;
        }
    },

可选优化：模板中添加可选链操作符，避免Vuex中user未初始化时出现属性读取报错：

<div v-if="authenticated">
    Hello, {{ getUser?.attributes?.first_name }}
</div>

登出时清除Vuex数据的实现方案

遵循Vuex单向数据流规范，通过mutation修改state数据即可：

第一步：在Vuex store中新增清除用户的mutation

// Vuex store 配置文件
const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    // 新增清除用户数据的mutation
    CLEAR_USER(state) {
      state.user = null
      // 其他需要同步清除的登录态数据（比如token、权限标识等）都可以在这里统一处理
    }
  }
  // 其余actions、getters等配置保持不变
})

第二步：在登出逻辑中提交mutation

// 你的业务代码中的登出方法
logout() {
  // 先执行其他登出逻辑：比如调用后端登出接口、清除localStorage缓存等
  // 提交mutation清除Vuex存储的用户数据
  this.$store.commit('CLEAR_USER')
  // 后续执行跳转到登录页等收尾操作
}