Question

我正在将vuejs（CLI 3）与axios和套接字一起使用。我的后端是NodeJ。

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>

后端NodeJ：

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-client 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”中检索函数，因此我认为可以像上面那样工作并且有效！

使用vue和套接字获取数据

1 个答案: