Vue.js 剑道网格与Vuex存储，VueJs

我正在尝试正确渲染剑道网格，该网格从我的存储中获取剑道数据

我使用的资源有：

这就是我尝试过的：

<template>
     <div>
        <kendo-grid :data-source="kendoDataSource" ref="gridComponent">
                <kendo-grid-column field="id" title="ID" :width="200" :hidden="true"></kendo-grid-column>
                <kendo-grid-column field="name" title="Name" :width="200"></kendo-grid-column>
                <kendo-grid-column field="type" title="Type"></kendo-grid-column>
        </kendo-grid>
     </div>
</template>
<script>
    import {mapGetters} from 'vuex';
    export default {
      computed: {
        ...mapGetters({
            items: 'widgets/getWidgets'
        }),
         kendoDataSource() { 
            let items = this.items;
            return new kendo.data.DataSource({
                data: items
            })
         }
      }
    }
</script>

我还得到了4个空行，数据函数中的响应正好是正确的信息，一个由4项组成的数组：

[{
    "id": 1,
    "name": "Richard Parker",
    "type": "Tiger",
    "data": "{}"
  },
  {
    "id": 2,
    "name": "Shere Khan",
    "type": "Tiger",
    "data": "{}"
  },
  {
    "id": 3,
    "name": "Simba",
    "type": "Lion",
    "data": "{}"
  },{
    "id": 4,
    "name": "Garfield",
    "type": "Cat",
    "data": "{}"
  }]

我还尝试从kendoDataSource（）返回项目，也得到了4个emtpy行

[{
    "id": 1,
    "name": "Richard Parker",
    "type": "Tiger",
    "data": "{}"
  },
  {
    "id": 2,
    "name": "Shere Khan",
    "type": "Tiger",
    "data": "{}"
  },
  {
    "id": 3,
    "name": "Simba",
    "type": "Lion",
    "data": "{}"
  },{
    "id": 4,
    "name": "Garfield",
    "type": "Cat",
    "data": "{}"
  }]