Question

我使用vue + vuex + vue-native-websocket。根据使用vuex处理websocket消息的文档，我应该使用SOCKET _...突变。

目前我处理 store / index.js 文件中的所有邮件，如下：

mutations: {
...
SOCKET_ONMESSAGE(): {
    switch(message.cmd) {
        case 'userRsp'
        ...
        case 'connectionRsp'
        ...
        case 'otherDataRsp'
        etc.
    }
}

我想要的是处理 user.js vuex模块中的所有用户相关数据， connections.js vuex模块中的所有连接数据。

我应该在每个组件中使用SOCKET_ONMESSAGE吗？在这种情况下，根据我的测试，即使对于消息不适用的模块，也会调用ON_MESSAGE。

Answer 1

在vue-native-websocket readme：

格式为：'json'已启用

[...]

如果数据上有.namespace，则会向此发送消息   namespaced: true存储（请务必在商店模块中启用此功能）。

如果响应数据中有.mutation值，则对应   使用名称SOCKET_[mutation value]
调用变异
如果响应数据中有.action值，即。 action: 'customerAdded'，相应的操作按名称调用：
actions: {
  customerAdded (context) {
    console.log('action received: customerAdded')
  }
}

使用json格式选项时：

Vue.use(VueNativeSock, 'ws://localhost:9090', { format: 'json' })

然后，您可以在响应中传递namespace和mutation或action名称，它将在您的商店模块中调用正确的功能。

是否意味着后端应该将namespace属性插入响应？

是。例如。后端应在数据中发送namespace: "user"以调用同名模块。

当后端定义前端中应该处理消息的处理程序时，这不是一个坏习惯吗？

你的后端是否意味着被多个应用程序使用？你不是自己建造的吗？如果没有，后端和前端是相同的应用程序。

你可以通过仅传递一个namespace属性并让前端处理它来避免在后端过于冗长，但是也可以更容易地告诉操作。这些是通用的属性名称，所以它不会太耦合。

如何使用websocket突变组织vuex

1 个答案: