使用form-create时如何将computed中的Vuex数据传递到data选项

我的表单是通过form-create动态生成的，示例代码如下：

<template>
  <form-create :rule='rule' v-model='fApi' :option='options'  />
</template>
<script>
 export default {
  data() {
    return {
        fApi: {},
        value: {},
        options: {
            submitBtn: false,
            resetBtn: false
        }, 
        props:{ 
          },
        rule: [{
                type: 'select',
                field: 'UART_STOPBIT_SELECT',
                title: 'Stop Selection bit',
                value: ['1', '2'],
                options: [{
                        'value': '1',
                        'label': '1 Stop bit',
                        'disabled': false},
                        {
                        'value': '2',
                        'label': '2 Stop bit',
                        'disabled': false}
                        ],
                    props: {
                        placeholder: '',
                        size: 'mini' }
                },

如果在template模板中直接编写v-model，很容易就能获取到computed计算属性，但现在需要将计算属性传递到data中时，控制台提示计算属性为undefined，该如何将computed属性中的Vuex数据正确传递到data中？

• data() 仅在组件初始化时执行一次，执行时机早于computed属性完成初始化的节点，此时直接在data()内访问computed值必然返回undefined
• data中定义的属性是初始化时的静态快照，后续computed关联的Vuex数据更新时，data里存的初始值不会自动同步，就算初始化阶段能拿到值，后续也会出现数据不一致的问题

方案1：将rule从data迁移到computed（推荐） #

这是最符合Vue响应式设计逻辑的方案，rule依赖的Vuex/computed值更新时，form-create会自动接收最新规则，不需要额外手动触发更新：

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      fApi: {},
      options: {
        submitBtn: false,
        resetBtn: false
      }
    }
  },
  computed: {
    // 从Vuex取需要的状态，示例为取串口默认配置
    ...mapState(['uartDefaultConfig']),
    // 把rule定义为计算属性，内部直接引用Vuex/其他computed值即可
    rule() {
      return [{
        type: 'select',
        field: 'UART_STOPBIT_SELECT',
        title: 'Stop Selection bit',
        // 直接使用Vuex中的值，不需要转存到data
        value: this.uartDefaultConfig.stopBit || '1',
        options: [
          {value: '1', label: '1 Stop bit', disabled: false},
          {value: '2', label: '2 Stop bit', disabled: false}
        ],
        props: {
          placeholder: '',
          size: 'mini'
        }
      }]
    }
  }
}
</script>

注意：如果select组件没有开启multiple: true多选配置，value不要传数组类型，直接传字符串即可，否则会出现选中态匹配异常

方案2：监听值变化后动态更新表单 #

如果业务场景要求必须把rule存在data中，不要在初始化data时就给依赖computed的字段赋值，先给对应字段留空，通过watch监听目标computed/Vuex值，等值加载完成后，调用form-create实例提供的fApi方法动态更新字段值或规则即可：

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      fApi: {},
      options: {
        submitBtn: false,
        resetBtn: false
      },
      rule: [{
        type: 'select',
        field: 'UART_STOPBIT_SELECT',
        title: 'Stop Selection bit',
        value: '', // 初始化留空
        options: [
          {value: '1', label: '1 Stop bit', disabled: false},
          {value: '2', label: '2 Stop bit', disabled: false}
        ],
        props: {
          placeholder: '',
          size: 'mini'
        }
      }]
    }
  },
  computed: {
    ...mapState(['uartDefaultConfig'])
  },
  watch: {
    // 监听Vuex值变化，同步更新表单
    uartDefaultConfig: {
      immediate: true, // 组件初始化时立刻执行一次
      handler(val) {
        if(!val || !this.fApi.setValue) return
        // 调用fApi的赋值方法给对应字段设值
        this.fApi.setValue('UART_STOPBIT_SELECT', val.stopBit)
      }
    }
  }
}
</script>

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