Vue触发v-on事件时报错无法读取null的StateUser属性是什么原因？

报错根因 #

该问题既不是Vuex故障，也和v-on是否支持传Vuex值无关，是两个使用错误共同导致的：

1. Vue模板的表达式默认绑定当前组件实例上下文，不需要手动加this前缀，错误添加this会导致指向异常，部分Vue版本下会直接读取不到对应属性；
2. Vuex中StateUser.message的初始值为null，接口还未完成数据赋值时模板就触发了渲染，直接读取null的isPrivate属性就会抛出空属性读取报错。

修复方案 #

1. 修正模板语法，移除this，加可选链做兼容 #

<form v-if="!StateUser.message?.isPrivate" @change="privateTrue(StateUser.message._id)">
  <input type="checkbox"/>
</form>

如果你没有通过mapGetters映射，直接调用$store.getters的写法如下（同样不需要加this）：

<form v-if="!$store.getters.StateUser.message?.isPrivate" @change="privateTrue($store.getters.StateUser.message._id)">
  <input type="checkbox"/>
</form>

2. 可选：优化逻辑健壮性 #

建议把Vuex属性映射到组件计算属性，同时加空值兜底，避免后续再出现同类空值报错：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['StateUser']),
    // 单独抽离嵌套属性，加空值兜底
    messageId() {
      return this.StateUser?.message?._id || ''
    },
    isMessagePrivate() {
      return this.StateUser?.message?.isPrivate ?? true
    }
  },
  methods: {
    privateTrue(id) {
      // 调用前判空，避免发无效请求
      if (!id) return
      axios.patch('/user/private-true/' + id)
        .then(res => console.log(res))
    }
  }
}

对应模板可以简化为：

<form v-if="!isMessagePrivate" @change="privateTrue(messageId)">
  <input type="checkbox"/>
</form>

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