使用mapState绑定vuex状态做ID重复校验时提示引用未定义值如何解决

问题1：Vuex Action 参数接收错误 #

你当前编写的idChecking action 传参写法不符合Vuex规范：Vuex Action 第一个固定参数是上下文对象，你传递的业务payload是第二个参数，修改如下即可：

actions: {
  // 第一个参数为context上下文，第二个参数才是你传入的载荷
  async idChecking(context, payload) {
    const { userId } = payload
    axios.get(`http://??.???.???.???:????/api/check/${userId}`)
    .then(res => {
      console.log(res)
    })
    .catch(error => {
      console.log(error)
    })
  }
}

问题2：v-model直接绑定Vuex State会导致数据异常 #

Vuex的State属于只读属性，不能通过v-model直接修改，否则会抛出非法修改State的报错，也会导致你拿不到最新输入的userId值，可以选择两种方案修复：

方案1：输入值存本地data，提交时同步到Vuex #

修改模板的Field绑定：

<Field
  :rules="validateId"
  type="text"
  placeholder="请输入ID"
  v-model="localUserId"
  name="userId"
  required />

修改组件逻辑，新增对应mutation：

// registration.vue
export default {
  data() {
    return {
      localUserId: ''
    }
  },
  methods: {
    async idCheck() {
      // 同步输入值到Vuex
      this.$store.commit('signup/setUserId', this.localUserId)
      // 调用校验接口
      this.$store.dispatch('signup/idChecking', {
        userId: this.localUserId
      })
    }
  },
  computed: {
    ...mapState('signup',{
      info: 'Userinfo'
    })
  }
}

// registration.js 新增mutation
mutations: {
  setUserId(state, userId) {
    state.Userinfo.userId = userId
  }
}

方案2：给映射的计算属性加set方法 #

修改组件的computed配置：

computed: {
  info: {
    get() {
      return this.$store.state.signup.Userinfo
    },
    set(val) {
      this.$store.commit('signup/setUserInfo', val)
    }
  }
}

// registration.js 新增mutation
mutations: {
  setUserInfo(state, info) {
    state.Userinfo = info
  }
}

修改后即可正常用v-model绑定info.userId。

额外排查点 #

如果修改后还是拿不到值，检查你在根store注册registration模块的时候，指定的模块名是不是signup，要和mapState的第一个参数保持一致。

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