Vuex chrome inspector shows empty entity stores

[mbajur]

I have a working setup of Vue.js app with Vuex store and vuex-orm. I am able to interact with my models and basically everything works so good i feel i'm slowly falling in love with vuex-orm.

But! There is a catch - i'm not sure if that's intended/well-known or not but i'm not able to inspect my vuex-orm store using chrome vue(x) inspector. Even if data is used and displayed in components, stores are always empty:

I could somehow live with that as i'm able to display and use my data in components but today, i wanted to implement a feature that comment needs to be updated when app receives an event about update through a websockets. The problem with that is update action does not work and is not updating any record because, from the point in code perspective, store is empty (i'm not sure if that's the reason but that's the only thing that comes to my mind). Running console.log(store().state) shows me that the stores are empty there (even if they are not as data is displayed in components).

Maybe before digging into the websockets issue, let's first focus on the fact that store is displayed as empty - is that an issue or that's normal?

Thanks in advance

[kiaking]

@mbajur Hi! Thank you for the feedback. OK, this is not expected. The Vue Devtool shouldn't show data as empty. I have no idea why it is still working on your component...

Since there are correct entities such as accounts and comments, I model registration and Vuex ORM plugin setup process is working fine.

Could you tell me how you are inserting data? I think it has to do something with that.

[mbajur]

That's happening in an open source project so it should be even easier for you to see how it's set up.

Here is my app initialization: https://gitlab.com/mbajur/prismo/blob/11-comment-updated-event/app/javascript/packs/application.js

Store initialization: https://gitlab.com/mbajur/prismo/blob/11-comment-updated-event/app/javascript/src/store/index.js

Vuex-orm initialization: https://gitlab.com/mbajur/prismo/blob/11-comment-updated-event/app/javascript/src/store/plugins/orm.js

Websocket listener: https://gitlab.com/mbajur/prismo/blob/11-comment-updated-event/app/javascript/src/plugins/actioncable.js

Thanks!

[kiaking]

@mbajur Hi! thanks for the info!

OK so this WS will be triggered each time there's an event right? In that case, it is recreating the fresh store each time it calls dispatch.

store().dispatch('backend/receiveData', { data: [payload.data], key: 'stories', onlyUpdate: true })

So if you update the store by comments.updated, the store gets refreshed and the data that were created by stories.updated will be gone. You need to use single store instance in your whole app (so I'm guessing that it does not only empty out Vuex ORM entities but whole Vuex State).

I think you could do this inside actioncable.js?

// In application.js

Vue.use(ActionCablePlugin, { store }) // <- Pass store as an option.

// In actioncable.js

ActionCablePlugin.install = (Vue, options) => {
  const store = options.store // <- Get store instance out of options.

  Vue.prototype.$cable = ws

  ws.subscriptions.create('UpdatesChannel', {
    received(payload) {
      switch (payload.event) {
        // Listen for story changes and update them if already present in the store
        case 'stories.updated':
          // Use passed store instance instead.
          store.dispatch('backend/receiveData', { data: [payload.data], key: 'stories', onlyUpdate: true })
          break;

        // ... And so on.
      }
    }
  })
}

[kiaking]

@mbajur Hi! Did you had any chance to look into this? I hope it worked for you.

[mbajur]

hey! Sorry for not replying to you earlier.

Yes, i fixed the bug about store being empty = update not working by moving the websockets logic to Vuex plugin (https://gitlab.com/mbajur/prismo/blob/master/app/javascript/src/store/plugins/actioncable.js) which seems to be an official place to put websocket stuff related to vuex.

However, the chrome dev tools still shows all my Vuex-orm entities as empty objects while i can use them in components (other store data, managed outside of vuex-orm is displayed just fine). It's not a blocker for me anymore but it would be great to be able to fix that somehow as it would make my life much easier :)

[kiaking]

Hi! Glad you fixed a problem (at least working). But that dev tools issue is really weird... Never experienced that and can't think of a reason why it's not working.

Is it possible for you to create some reproducible fiddle or something?

[kiaking]

@mbajur Hi! Did you had any update on this 😃 ?

[mbajur]

hey! Sorry for lack of response, i was on holidays. Anyway, i completely dropped vue.js from my project so i don't need vue-orm anymore. I think you can safely close this issue - if there will be anyone like me in the future, it could be reopened :)

Thank you for all your support !

[kiaking]

Well, I'm sad to hear that you are dropping Vue. But I hope you'll have a wonderful development experience with your new tool and build something amazing!

Feel free to open an issue if you have any chance to use Vuex ORM again in the future! 👍

[mbajur]

don't be sad! it just turned out Vue.js is an overkill for such simple interactions i have in my app. But vue is still my framework of choice and i'm definitely be using vuex-orm in my future projects as it's a brilliant piece of software.

Take care and keep up the good work!