v-model绑定的数据为什么会报undefined

开发遇到一个神奇的bug，v-model绑定data里的数据，竟然报undefined，代码大概这样：

<el-form ref="form" :model="formData">
  <el-form-item label="姓名">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="手机号">
    <el-input v-model="formData.phoneNumber" placeholder="请输入手机号">
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">
      提交
    </el-button>
    <el-button>
      取消
    </el-button>
  </el-form-item>
</el-form>

export default {
    data() {
        return {
            formData: {
                name: ' ',
                userId: this.$store.state.userId,
                phoneNumber: ' ',
            }
        }
    },
    methods: {
        onSubmit() {
            console.log(this.formData);
        }
    }
}

看错误日志的时候，只看到了phoneNumber undefined报错，忽视了userId也报了undefined。
找到罪魁祸首了：$store.state中并没有userId这一字段，vue的data()也是一个函数，在取值的时候，到userId: this.$store.state.userId就遇到错误了，因此后面的phoneNumber就无法执行，导致找不到phoneNumber的定义。
看报错还是得看仔细。

vue的data函数

组件的data数据为什么必须要以函数返回的形式，为什么不是简单的对象形式呢？

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

Vuex的State和Getter

Vuex由五个部分组成：State、Getter、Mutation、Action 和 Module。
参考：https://www.jianshu.com/p/946df1834963