Vuex+Vue-socket.io+Node.js

简单介绍项目使用的插件:

  "dependencies": {
    "express": "^4.16.3",
    "socket.io": "^2.1.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-socket.io": "^2.1.1-b",
    "vuex": "^3.0.1"
  }

第一步构建node服务器:

const express = require('express');
const server = express();
const app = express().listen(80);

const io = require('socket.io').listen(app);
io.sockets.on('connection', (socket) => {
    console.log('连接成功');
    socket.emit('login', 'loginSuccess');
    socket.on('toggle', value => {
        console.log(value);
        socket.emit('toggle', !value);
    })
});

第二步修改配置文件(config目录下的index.js),
原来proxyTable为空对象,先加入以下内容:

proxyTable: {
    '/api': {
        target: 'http://localhost:80/api/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

第三步配置建立Vuex仓储文件:

src目录下建立store文件夹,添加index.js主文件,
仓储文件以模块形式导入主文件:
import Vue from 'vue'
import vuex from 'vuex'
import socketData from './socketData.js'
Vue.use(vuex);

export default new vuex.Store({
    modules: {
        dialog: socketData
    }
})
dialog模块内容:
export default {
    state: {
        connectStatus: false,
        info: true,
        message: 'nothing'
    },
    getters: {
        not_connectStatus(state){
            return !state.connectStatus
        }
    },
    mutations: {
        SOCKET_CONNECT(state){
            state.connectStatus = true
        },
        changeContent(state, val) {
            state.message = val
        },
        changeInfo: (state, val) => {
            state.info = val
        }
    },
    actions: {
        SOCKET_LOGIN: ({commit}, val) => {
            commit('SOCKET_LOGIN', val)
        },
        changeContent: ({commit}, val) => {
            commit('changeContent', val)
        },
        changeInfo: ({commit}, val) => {
            commit('changeInfo', val)
        },
    }
}

第四步配置main.js文件:

tip:(node后台监听端口不能和vue-cli部署在同一个端口,我选择的是8080和80)

import Vue from 'vue'
import App from './App'
import router from './router'
import VueSocketio from 'vue-socket.io';
import vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false
Vue.use(vuex);
Vue.use(VueSocketio, 'http://localhost:80', store);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

最后一步添加Vue前端页面实现:

<template>
    <div>
        <input type="text" v-model="msg">
        <button @click="changeContent(msg)">确认</button>
        <button @click="toggle">切换</button>
        <br>
        connectStatus: {{ connectStatus }}
        <br>
        not_connectStatus: {{ not_connectStatus }}
        <br>
        info: {{ info }}
        <br>
        inputMessage: {{ message }}
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    data() {
        return {
            msg: ''
        }
    },
    sockets: {
        connect() {
            console.log('socket connected');
        },
        login(value) {
            console.log(value)
        },
    },
    /*简单使用mapState, mapGetters和mapActions*/
    computed: {
        ...mapState({
            connectStatus: state => state.dialog.connectStatus,
            message: state => state.dialog.message,
            info: state => state.dialog.info
        }),
        ...mapGetters(['not_connectStatus'])
    },
    methods: {
        ...mapActions(['changeContent', 'changeInfo']),
        toggle() {
            this.$socket.emit('toggle', this.info);
            this.$socket.on('toggle', value => {
                this.changeInfo(value)
            });
        }
    }
}
</script>

<style>

</style>

该简单小项目可以实现:

1.点击确认按钮实现——通过mapActions映射将vuex-store里message的值替换成输入框内值
2.点击切换按钮实现——发送请求至socket后台获取info的相反布尔值,再将其返回给前台通过mapActions映射传递到vuex-store中更改其info的布尔值
阅读更多
换一批

没有更多推荐了,返回首页