vuejs + element-ui, 后台数据绑定select的option选项

Question

使用vuejs+element-ui的时候遇到了一个问题
现在有一个page.vue的页面

data() {
    return {
        searchFormConfig: {
          formItems: [{
              label: '用户ID',
              type: 'input',
              prop: 'userId'
            }, {
              label: '城市',
              type: 'select',
              prop: 'city',
              func: this.changeCity,
              placeholder: '全部',
              subItems: []
            }, {
              label: '区域',
              type: 'select',
              prop: 'region',
              placeholder: '全部',
              subItems: []
            }]
        }
    }
},
methods: {
  getCities() {
    this.$store.dispatch('getCities');
    this.searchFormConfig.formItems[2].subItems = this.$store.getters.cities;
  },
},
created() {
  this.getCities();
}

城市列表的数据是通过axio去后台请求的，然后放在select标签的options选项中，现在的问题是我通过某个按钮点击进入该页面，select标签的options选项能正常显示城市数据，但是刷新之后，select标签的options选项为空，这是为什么？

如果我将上述代码改为下面这样，就不会有上面的问题了，请问是为什么呢？
还有一个问题，computed里面的searchFormConfig是不是不能和data或者props的属性名字相同？

data() {
    return {
        initialSearchFormConfig: {
          formItems: [{
              label: '用户ID',
              type: 'input',
              prop: 'userId'
            }, {
              label: '城市',
              type: 'select',
              prop: 'city',
              func: this.changeCity,
              placeholder: '全部',
              subItems: []
            }, {
              label: '区域',
              type: 'select',
              prop: 'region',
              placeholder: '全部',
              subItems: []
            }]
        }
    }
},
methods: {
  getCities() {
    this.$store.dispatch('getCities');
  },
},
computed: {
  searchFormConfig() {
    this.initialSearchFormConfig.formItems[2].subItems = this.$store.getters.cities;
    return this.initialSearchFormConfig;
  }
},
created() {
  this.getCities();
}

Answer 1

你这个数据是在没有进入某个页面之前就拿到的吧，就算你通过vuex状态也是在没有刷新情况下vuex状态才有效啊。你刷新的页面又没有请求这个数据。