时间戳

首页 > 解决方案 > Vue：在 JS 类中使用 Vuex 存储

vuejs2 - Vue：在 JS 类中使用 Vuex 存储

问题描述

我有一个 Vue 应用程序，我在其中使用 Socket.io 进行实时连接。我决定将所有 Socket 调用放入它自己的socket.js类中，并将该类导入到我的 Vue 组件中。我已经导入了商店，但我希望能够在这个 js 文件中将数据保存到 Vuex 商店，但我不知道如何在 .vue 文件之外执行此操作。

AppSocketIO.js

import store from '../../../store';

class AppSocketIO {
    init() {
        this.socketIO = new AppSocketIO('kjiu887', {
          // run a mutation to save data to the Vuex store
        });
    }

Vue组件

mounted() {
    this.initSocket();
},
methods: {
    initSocket: function() {
        const socket = new AppSocketIO();
    }
}

标签： vuejs2vuex

解决方案

这就是我会做的。将套接字保留在单独的文件中。

socket.on('message', (data) => {
  store.commit('mutationName', data) // For mutations
  store.dispatch('actionName', data) // For actions
})

如果您的突变/操作是命名空间的，您必须牢记这一点。

推荐阅读