如何在Vuex的Getter中返回空实例适配Vuelidate验证？

1. 在Vuex Getter中返回结构化兜底空对象 #

从数据源层面保证组件拿到的永远是符合验证结构的对象，彻底避免undefined问题。

• 先定义一个生成空location对象的模板函数，集中维护结构，后续属性变更只需修改这一处：

  // 可放在Vuex模块的工具区或全局工具文件中
  const createEmptyLocation = () => ({
    email: '',
    name: '',
    address: '',
    // 所有Vuelidate验证依赖的属性都初始化对应空值（字符串用''，数字用0，布尔用false等）
  })
  

• 在Getter中用这个函数做兜底：

  const getters = {
    getLocation: state => state.location ?? createEmptyLocation()
  }
  

  这里用??（空值合并运算符）确保只有当state.location为null或undefined时才返回空对象，不会覆盖正常的非空数据。

2. 在组件的Computed属性中兜底 #

如果不想修改Vuex，也可以在组件层面处理，同样用模板函数维护结构：

// 组件内部代码
export default {
  computed: {
    location() {
      const rawLocation = this.$store.getters.getLocation
      // 可导入全局的createEmptyLocation函数，或在组件内单独定义
      return rawLocation ?? createEmptyLocation()
    }
  }
}

3. 优化Vuelidate验证逻辑（辅助方案） #

如果只是临时规避报错，可在验证规则中增加空对象判断，但更推荐前两种从数据源兜底的方式：

import { required, email } from '@vuelidate/validators'

export default {
  validations() {
    return {
      location: {
        email: {
          required,
          email,
          // 先判断location是否存在，再执行验证
          $validator: (value, parent) => parent.location ? email(value) : true
        }
      }
    }
  }
}

关键注意点 #

• 不能直接返回{}空对象，必须包含Vuelidate验证用到的所有属性，否则验证规则仍会因找不到属性报错。
• 用模板函数维护空对象结构，避免多处硬写属性，解决属性变更时同步修改的脆弱问题。

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