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

Question

我对 vue.js 比较陌生，尤其是 nuxt。我有一个小功能可以从后端获取数据并更新表格。我不确定如何调试这个任务，因为我在挂载的钩子中调用它，当我加载页面时，我可以在 vuex 选项卡中看到数据。payload:Objectcount:2next:nullprevious:nullresults:Array[2]0:Object1:Objectcreated_at:"2020-09-14T12:00:00Z"event_name:"wrw"id:2market_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>

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