Маршрутизатор vuejs. go (- 1) не отображается во второй раз - PullRequest
Новая
       27

Маршрутизатор vuejs. go (- 1) не отображается во второй раз

0 голосов
/ 29 января 2020

В настоящее время я использую vue -router для управления отличиями Vue моего проекта.

My main. js

import Vue from 'vue'
import App from './App.vue'
import jQuery from 'jquery'
import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global.$ = jQuery

import './assets/css/animate.css'

import router from './router'
import store from './vuex'

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

Когда я нахожусь На моей приборной панели ('/ dashboard') в первый раз вызываются "созданные" методы. Данные извлекаются из API и отображаются в моем массиве.

После этого я нажимаю на один элемент моего массива, который направляет меня к «/ details /: id» (с id id моего элемента). Все работает хорошо, и затем я нажимаю кнопку «Go назад».

Я снова заканчиваю sh на своей странице панели инструментов, я вижу, что методы 'create' вызываются снова, данные хорошо извлекаются из API, но ничего не отображается, и мой массив остается пустым.

Я действительно не понимаю, почему.

Есть код функции 'create' : 

export default {
  created: function() {
    console.log('created => dashboard');
    let store = this.$store;
    let q = this.rows; 

    //get rows 
    if (store.state.socket.io._callbacks["$rows"] == undefined) {
      console.log("Binding rows");
      //Where I receive the rows from API
      store.state.socket.io.on("rows", data => {
        console.log("rows reponse:", data);
        if (data.success) {
          this.nbrItems = data.rows.length;
          q.splice(0, q.length); //Clean the array without replacing the instance
          data.rows.map(a => q.push(a));
          console.log("Queue length: " + q.length);
        }
      });
    }
    //get the queue
    this.refresh(); // This send a request to the API to ask it to send us back the datas
  },

И я использую this.$router.go(-1), чтобы вернуться назад на страницу '/ dashboard'.

Редактировать: Есть ли проблема состояния или что-то в этом роде? Я не понимаю, почему, потому что в памяти я могу получить доступ ко всем данным, просто больше нет привязки ...

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Я понял:

Проблема исходила от socket.io. Я проверяю, является ли событие привязанным, прежде чем подписаться на функцию, и эта функция содержит «this», которое все еще ссылалось на предыдущий Vue экземпляр.

Просто исправлено путем замены этого: 

  //get rows 
    if (store.state.socket.io._callbacks["$rows"] == undefined) {
      console.log("Binding rows");
      //Where I receive the rows from API
      store.state.socket.io.on("rows", data => {
        console.log("rows reponse:", data);
        if (data.success) {
          this.nbrItems = data.rows.length;
          q.splice(0, q.length); //Clean the array without replacing the instance
          data.rows.map(a => q.push(a));
          console.log("Queue length: " + q.length);
        }
      });
    }

этим: 

    if (store.state.socket.io._callbacks["$rows"] != undefined) {
      store.state.socket.io.off("rows");
    }
    console.log("Binding rows");
    store.state.socket.io.on("rows", data => {
      console.log("rows reponse:", data);
      if (data.success) {
        this.nbrItems = data.rows.length;
        q.splice(0, q.length);
        data.rows.map(a => q.push(a));
        console.log("Queue length: " + q.length);
      }
    });

Но это заставляет меня задуматься, могу ли я по-прежнему иметь доступ к предыдущему экземпляру Vue, означает ли это, что со временем произойдет какая-то утечка памяти ?

Полагаю, что нет со сборщиком мусора, но это означало бы, что ничто другое не относится к предыдущему экземпляру.

0 голосов
/ 29 января 2020

Вы выталкиваете каждый элемент массива перед вызовом созданной функции? Я все еще ученик, но мне кажется, что вам нужно вытолкнуть все, прежде чем добавлять новые элементы в массив.

...