Using in Vue store

[joeczucha]

Apologies if this is obvious but is there any way to use this within a Vuex store? I tried including it in the same way but I was just getting this.$cable is undefined message... but I can't figure out why. Thanks!

[mclintprojects]

Hi @joeczucha. I never implemented the ability to use it in a Vuex store because I didn't think anyone would use it that way. Now however, I know I should. I'll try to spend Sunday working on it.

[mclintprojects]

Hi @joeczucha. Just fixed this. Kindly update the lib to v1.6.0 then take a look at the new README to know how to set it up.

[joeczucha]

@mclintprojects Thank you so much for doing that, I really appreciate it. My plan is to just keep all the websocket logic in the store (like I used to do with the API logic) and then just let everything else render from there... should keep it nice and tidy.

I'll have a look this afternoon, thanks again Clinton!

[joeczucha]

Sorry @mclintprojects, I've tried adding it as per the readme but I'm getting the following message in my console TypeError: h.prototype is undefined. I've double checked the ordering etc. and all seems fine.

Minimal reproduction:

main.js

import Vue from "vue";
import ActionCableVue from 'actioncable-vue';
import App from "./App.vue";
import store from "./store";

Vue.use(ActionCableVue, {
debug: true,
debugLevel: 'error',
connectionUrl: 'ws://localhost:3000/cable',
connectImmediately: true,
store
});

Vue.config.productionTip = false;

new Vue({
store,
render: h => h(App)
}).$mount("#app");

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
});

It looks like it's an issue with this line: https://github.com/mclintprojects/actioncable-vue/blob/2a7508b73822f7f844c20f0fa7b8f883d0fdb62b/src/cable.js#L32 but I can't figure out why that would be the case.

Sorry to be a pain :( and thanks for your help!

Edit I tried nuking node_modules and reinstalling but same issue. Here is my dependencies, in case there are any clues:

"dependencies": {
    "actioncable-vue": "^1.6.0",
    "core-js": "^3.4.4",
    "date-fns": "^2.9.0",
    "vue": "^2.6.10",
    "vuex": "^3.1.2"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.2",
    "@vue/cli-plugin-eslint": "^4.2.2",
    "@vue/cli-plugin-vuex": "^4.2.2",
    "@vue/cli-service": "^4.2.2",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
}

[mclintprojects]

Hi, @joeczucha! It turns out that Vuex.Store is an object. Owing to that, it's impossible to inject $cable into its execution context. Sorry, your use-case won't be possible to implement.

[prem-prakash]

In my use case, I have a class responsible for authentication. I would like to connect and disconnect from actioncable when user sign in or sign out. Would it be possible to import actioncable same way I can do with an Vuex Store?

[mclintprojects]

@prem-prakash I'll look into this and get back to you as soon as I can.

[mclintprojects]

@prem-prakash Kindly use this build directly in your project and let me know if it works for your use-case.