vue.js - 将 Vuex 与 Nuxt 和 Vue-Native-Websocket 结合使用

Question

我正在尝试用来自 websocket 的数据填充我的 vuex 存储。我正在使用 Nuxt。为了处理 websocket，我使用了 vue-native-websocket 包。连接到 websocket 成功，但提交到商店不起作用，它会在每个套接字事件上触发错误 Uncaught TypeError: this.store[n] is not a function

根据 Nuxt 和 vue-native-websocket 文档，我使用它们如下:

插件 native-websocket.js:

import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'
import store from '~/store'

Vue.use(VueNativeSock, 'wss://dev.example.com/websocket/ws/connect', { store: store })

nuxt.config.js

  plugins: [
   {src: '~plugins/native-websocket.js', ssr: false}
],

随着连接的建立，我得出一个结论，包连接正确，所以它是关于商店的，我看不出有什么问题

UPD:经过一些解决方法后，我发现 native-websocket.js 中的日志存储返回

store() {
  return new __WEBPACK_IMPORTED_MODULE_1_vuex__["default"].Store({
   state: {...my store

并提交给它返回 __WEBPACK_IMPORTED_MODULE_2__store__.default.commit is not a function正如我所看到的，这是关于 webpack 的一些东西

Answer 1

您需要以不同方式导入商店，例如从插件的上下文中获取它。这里有一些docs , 但他们有些欠缺

import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'

export default ({ store }, inject) => {
  Vue.use(VueNativeSock, 'wss://dev.example.com/websocket/ws/connect', { store: store })
}