Vue JS-无法使用来自 Vuex 的数据更新 html 表

Question

我对 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>

Answer 1

您没有从您的商店获取投票数据。

<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>

如果我是你，我会在 created 钩子中调用 this.pollData()。