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: ''
})

最后一步添加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的布尔值