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 {&nbsp;&nbsp;&nbsp; // remove polling from data object and&nbsp;&nbsp;&nbsp; computed: {&nbsp; &nbsp; ...mapState({&nbsp; &nbsp; &nbsp; polling: (state) => state.polling.polling, // Give the correct path.&nbsp; &nbsp; })&nbsp; },&nbsp; created() {&nbsp; &nbsp; this.pollData();&nbsp; }}</script>如果我是你，我会在创建的钩子中调用 this.pollData() 。