Использование Vuex с Nuxt и Vue-Native-Websocket
Я пытаюсь заполнить свой магазин vuex данными из веб-сокета. Я использую Nuxt. Для работы с websocket я использую пакет vue-native-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, как я вижу
@Ohgodwhy я только что пробовал, консоль чистая, обратный вызов не запускает { passToStoreHandler: function(eventName, event) { console.info(this.store); console.info('test') }}
@Ohgodwhy Извините, я забыл передать магазин этому объекту. Теперь console.info возвращает мой store(), но ошибки нет, только если обратный вызов передан третьему объекту аргумента. В любом случае никаких коммитов для хранения не производится
Может быть, попробуйте создать коммит самостоятельно и зафиксировать его в магазине. Это работает?
@Ohgodwhy Пробовал this.store.commit('incrementCounter') внутри passToStoreHandler. Получил this.store.commit is not a function
Ответы 1
Вам нужно импортировать магазин по-другому, например. получить его из контекста плагина. Здесь немного документы, но их несколько не хватает
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 })
}
Вместо этого используйте обратный вызов в качестве третьего аргумента,
passToStoreHandler: function (eventName, event) {, внутри выйдите из системыthis.store, какое значение