将 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 文档，我使用它们如下：

插件原生-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 returns

中的日志存储

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

并致力于它 returns __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 })
}

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

Using Vuex with Nuxt and Vue-Native-Websocket

vue.js

vuex

nuxt.js