Compute

可以获取Props 和 Data 中的值，方法不支持异步。可以是方法或者值。使用场景比较多。

- 转换数据

<template>
    <el-table :data="datalist">
        ...
    </el-table>
</template>

<script>
    export default {
        name: 'ComputeDemo',
        data() {
            return {
                resDataList : []
            }
        },
        computed: {
           userStateList() {
               return this.$store.state.dict.userStateList || []
           },
           userStateMap: {
               const map = {}
               this.userStateList.forEach(item => {
                   map[item.code] = item
               })
               return map
           },
           datalist() {
               const { resDataList, userStateMap} = this
               return resDataList.map(item => {
                   return {
                       ...item,
                       userStateDesc: userStateMap[item.userState].desc || ''
                   }
               })
           }
        }
        created() {
            this.init()
        },
        methods: {
            init() {
                this.requestDict()
                this.requestList()
            },
            requestDict() {
                this.$store.dispath('dict/getDict', {dicts: ['userStateList']})
            },
            requestList() {
                return this.$store.dispath('dict/getDict', {dicts: ['userStateList']})
                .then(data => {
                    this.resDataList = data?.list || []
                    return data
                })
            }
        }
    }

</script>

- 双向绑定 Props或者Vuex

<template>
    <div>
        <el-input v-model="username" />
        <el-input v-model="userState" />
    </div>
</template>

<script>
    export default {
        name: 'ComputeDemo',
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        computed: {
           username: {
               get() {
                   return this.value
               },
               set(val) {
                   this.$emit('updateValue', val)
               }
           },
           userState: {
               get() {
                   return this.$store.state.user.userState
               },
               set(val) {
                   this.$store.commit('user/SET_USER_STATE', val)
               }
           }
        }
    }

</script>

- 日期合并拆分

<template>
    <div>
        <el-date-picker v-model="date" type="daterange" />
    </div>
</template>

<script>
    export default {
        name: 'ComputeDemo',
        data() {
            return {
                stateDate,
                endDate
            }
        }
        computed: {
           date: {
               get() {
                   const {stateDate, endDate} = this 
                   if(stateDate&& endDate) {
                       return [stateDate, endDate]
                   }
                   return []
               },
               set(val) {
                   const [stateDate, endDate] = val 
                   this.stateDate = stateDate
                   this.endDate= endDate
               }
           }
        }
    }

</script>