在vuejs数据对象中声明一个空数组的方法正确吗?

mqkwyuun  于 2022-12-19  发布在  Vue.js
关注(0)|答案(1)|浏览(282)

我需要多个空数组和一些预定义的对象来搭配一个组件。下面的数据对象格式对我很有效。但是我无法判断这是否是正确的模式,以及它是否会产生任何其他后果。
下面是我编写的一个vue组件的部分代码。

<template>
 //html
</template>

<script>
export default {
    name: "SomeComponent",
    data() {
        let dates = []
        let open = []
        let closed = []
        let replied = []
        let option = {
            title: {
                text: "Summary",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: [{
                        name: "Open",
                        icon: "circle"
                    },
                    {
                        name: "Closed",
                        icon: "circle"
                    },
                    {
                        name: "Replied",
                        icon: "circle"
                    },
                ],
            }
        }
        return {
            dates,
            open,
            closed,
            replied,
            option,
            theme,
        }
    },
}
</script>
92dk7w1h

92dk7w1h1#

您可以通过迭代动态地生成它。
这可能会使它更可读,但也更复杂。
这种模式对我来说并不令人震惊。
同时,我推荐更多像这样的东西

<script>
export default {
  data() {
    return {
      dates: [],
      open: [],
      closed: [],
      replied: [],
      option: {
        title: {
          text: 'Summary',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: [
            {
              name: 'Open',
              icon: 'circle',
            },
            {
              name: 'Closed',
              icon: 'circle',
            },
            {
              name: 'Replied',
              icon: 'circle',
            },
          ],
        },
      },
    }
  },
}
</script>

这样编写的data中的return很重要,而且可读性更强(更多关于如何在文档中找到它的信息)。
此外,这样你会得到你所有的状态React的道路上,如果你用method或类似的变异。

相关问题