Javascript Vue JS-无法使用Vuex中的数据更新html表

我对vue.js比较陌生，尤其是nuxt。我有一个从后端获取数据并更新表的小函数。我不确定如何调试此任务，因为我正在挂载的钩子中调用此任务，并且在加载页面时可以在vuex选项卡中看到数据

payload:Object
count:2
next:null
previous:null
results:Array[2]
0:Object
1:Object
created_at:"2020-09-14T12:00:00Z"
event_name:"wrw"
id:2
market_name:"wrwr"
market_type:"wrwr"
odds:242 
runner_name:"wrwr"
side:"wrwrw"
stake:424

由于某些原因，我无法填充该表。我可以看到，在页面加载后，每隔三秒就会调用函数pollData（）。我不知道为什么我看不到表中的数据

如何使用vuex数据更新表

    <template>
      
    <div id="app">

    <h1>Orders</h1>
      <table>
          <thead class="thead-dark">
                        <tr>
                            <th>Time Stamp</th>
                            <th>Event Name</th>
                            <th>Market Name</th>
                            <th>Market Type</th>
                            <th>Runner Name</th>
                            <th>Side</th>
                            <th>Odds</th>
                            <th>Stake</th>
        </tr>
          </thead>
            <tbody>
                <tr v-for="o in polling" :key="o.id">
                <td>{{o.created_at}}</td>
                            <td>{{o.event_name}}</td>
                            <td>{{o.market_name}}</td>
                            <td>{{o.market_type}}</td>
                            <td>{{o.runner_name}}</td>
                            <td>{{o.side}}</td>
                            <td>{{o.odds}}</td>
                            <td>{{o.stake}}</td>
        </tr>
          </tbody>
      </table>
    </div>
    </template>

    <script>
        import axios from "axios";
      import { mapMutations } from 'vuex'
      
    export default {
      
    data () {
        return {
            polling: null
        }
    },
    methods: {
        pollData () {
            this.polling = setInterval(() => {
          this.$store.dispatch('getOrders')
        }, 3000)
        }
    },
    beforeDestroy () {
        clearInterval(this.polling)
    },
    mounted () {
        this.pollData()
    }
    }

     </script>

命令
时间戳
事件名称
市场名称
市场类型
跑步者姓名
一边
可能性
赌注
{{o.created_at}}
{{o.event_name}
{{o.market_name}
{{o.market_type}
{{o.runner_name}}
{{o.side}}
{{o.赔率}
{{o.stack}}
从“axios”导入axios；
从“vuex”导入{mapstations}
导出默认值{
数据（）{
返回{
轮询：空
}
},
方法：{
pollData（）{
this.polling=setInterval（（）=>{
这是。$store.dispatch（'getOrders'））
}, 3000)
}
},
在销毁之前（）{
clearInterval（this.polling）
},
挂载（）{
这是pollData（）
}
}

您没有从存储中获取轮询数据

<script>
import { mapState } from "vuex";
export default {
  
  // remove polling from data object and
  
  computed: {
    ...mapState({
      polling: (state) => state.polling.polling, // Give the correct path.
    })
  },
  created() {
    this.pollData();
  }
}
</script>

从“vuex”导入{mapState}；
导出默认值{
//从数据对象和
计算：{
…地图状态({
polling：（state）=>state.polling.polling，//给出正确的路径。
})
},
创建（）{
这是pollData（）；
}
}

---

如果我是你，我会在created hook中调用这个.pollData（）。

你的模板尝试迭代

轮询

，但在

pollData（）

@tony19中设置为计时器ID（整数）。如何从pollData函数获取数据并传递到data（）属性以更新模板？假设

getOrders

获取数据，将结果存储在Vuex状态变量中，然后更新您的

v-for

以迭代该状态变量。我尝试了您的解决方案，但pollData（）函数的调用频率似乎超过了每三秒一次，而且我还遇到了一个错误，无法读取Undefine的属性“polling”。我刚刚更正了路径，viola它正常工作。感谢您向我展示如何使用这样的存储数据。当我离开页面时，轮询仍在继续，这段代码还有另一个问题。你知道我怎么在毁灭前打电话吗？不，我不知道。