Блог

Я относительно новичок в vue.js и особенно нукст. У меня есть небольшая функция для получения данных из серверной части и обновления таблицы. Я не уверен, как отладить эту задачу, поскольку я вызываю это в смонтированном хуке, и я вижу данные на вкладке 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>
  

Вы не извлекли данные опроса из своего хранилища.

 <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() в созданном хуке.