получить данные с помощью vue и сокетов

Question

Я использую vuejs (CLI 3) с axios и сокетами.Мой бэкэнд - NodeJs.

Html (просмотр всех пользователей):

...
<ul v-if="users.length > 0">
  <li v-for="user in users" :key="user.id">
     <router-link :to="'/oneuser/' + user.permalink" tag="li" active-class="active" @click.native="setmyid(user._id)">
        <a>{{ user.name }} - {{ user.last_name }}</a>
     </router-link>
  </li>
</ul>
...
<script>
import axios from 'axios'
import io from 'socket.io-client'
export default {
  name: 'get-user',
  data () {
    return {
      users: [],
      socket: io('localhost:7000')
    }
  },
  methods: {
    mycall () {
      axios.get('http://localhost:7000/api/users')
        .then(res => {
          // console.log(res)
          const data = res.data
          const users = []
          for (let key in data) {
            const user = data[key]
            user.id = key
            users.push(user)
          }
          // console.log(users)
          this.users = users
        })
        .catch(error => console.log(error))
    }
  }
  mounted () {
    this.mycall()
    this.socket.on('user-deleted', function (data) {
      this.mycall()
    })
  }
}
</script>

Html (просмотр пользователя):

<script>
import axios from 'axios'
export default {
  name: 'one-user',
  data () {
    return {
      name: '',
      surname: '',
      id: localStorage.getItem('usId'),
      socket: io('localhost:7000')
    }
  },
  mounted () {
    axios.get('http://localhost:7000/api/get-user/' + this.id)
      .then(res => {
        const data = res.data
        this.name = data.name
        this.surname = data.last_name
      })
      .catch(error => console.log(error))
  },
  methods: {
    mySubmit () {
      const formData = {
        _id: this.id
      }
      axios.post('http://localhost:7000/api/delete-user', formData)
        .then(this.$router.push({ name: 'get-user' }))
        .catch(error => console.log(error))
    }
  }
}
</script> 

Backend NodeJs:

controller.postDeleteUser = function(req,res){        
    User.deleteOne({"_id" : req.body._id}, function(err){
        io.emit('user-deleted', req.body._id);
        res.send('ok');
    });    
};

Когда я захожу в режим просмотра пользователя и удаляю пользователя, он указывает мне просмотреть всех пользователей.У меня есть две основные проблемы здесь.

1) После перенаправления я снова увидел всех пользователей, даже удаленных.В моей базе данных пользователь удалил правильно.

2) Я не знаю, где именно и как использовать сокеты в моем коде.

Я использую спереди socket.io-плагин клиента npm.Также я не хочу использовать (и не использую его в своем коде) vue-socket.io, потому что IE 11 и более поздние версии не поддерживаются, и это выдает мне некоторые ошибки.

Что я пробовал до сих пор:

1) Использование часов следующим образом:

watch: {
  users: function (newValue) {
    newValue = this.mycall()
  }
}

Это очень плохо для производительности браузера, потому что всегда вызывать запрос из браузера.

2) использовать beforeUpdate или Обновлено жизненный цикл:

updated () {
 this.mycall()
}

Это работает, но имеет плохую производительность.Он много раз делает запросы к серверу.

3) или с сокетами

updated () {     
 this.socket.on('user-deleted', function (data) {
   this.mycall()
 })
}

, и это выдает мне ошибку:

this.mycall() is not a function

Что я делаюнеправильно?Куда положить код с сокетами?

Answer 1

Я изменил представление файла всех пользователей на:

...
methods: {
  mycall () {
    axios.get('http://localhost:7000/api/users')
     .then(res => {
       const data = res.data
       const users = []
       for (let key in data) {
         const user = data[key]
         user.id = key
         users.push(user)
       }
       this.users = users
     })
     .catch(error => console.log(error))
  },
  socketcall (thecall) {
    this.socket.on(thecall, (data) => {
      this.mycall()
    })
  }
}
....
created () {
  this.mycall()
},
mounted () {
  this.socketcall('user-deleted')
}

Хуки-ловушки жизненного цикла не могут получить функции внутри "this.socket.on", поэтому я подумал, что нужно сделать, как описано выше, и это работает!