如何使用vuex和socketio制作实时Crud？

Question

我想使用vuex，node，express和socketio执行实时操作，但是使用以下语法我无法得到结果。

服务器

index.js

const server = app.listen('3000',() => {
    console.log('<--- Web Server Starter --->')
    const io = require('./sockets')(server)
    io.on('connection', socket=>{
        console.log('client connected');
    })
})

socket.js

    let io
    module.exports = {
        init:httpServer =>{
            io = require('socket.io')(httpServer)
            return io
        },
        getIo:()=>{ 
            if(!io){
                throw new Error('socket io not initialized')
            }
            return io
        }
    }

user.js

const io = require('../socket')
router.post('/newuser',(req, res) => {
    res.json({ serverResponse: 'userCreated' })
    io.getIo().emit('newuser',{serverResponse:'created',user:user})
})

客户

Module user.js（VUEX操作）

getusers({ commit }){
    const sessionToken = localStorage.getItem('sessionToken')
    axios.get('/newuser', {
        headers: {
            Authorization: `Bearer ${localStorage.getItem('sessionToken')}`
        },
    })
        .then(response => {
            const socket = openSocket('http://localhost:3000')
            socket.on('newuser', data => {
                if (data.serverResponse === 'created') {
                    this.users = data.user
                    commit('GET_USERS', users)
                })
        })
        .catch(error => {
            alert(error)
        })
})

创建新用户时，用户列表不会自动更新，但是我必须刷新页面才能看到新用户，为什么会发生这种情况？

Answer 1

首先，让我明确地说，VUEX是集中式状态管理，与“ 实时”无关。

您需要使用socket.io和socket.io在服务器上设置事件监听器>

Socket.IO可以用Express，vue-socket.io来实现

要与客户端上的Socket.IO一起使用VUEX，vue-socket.io