support devtools

[digi604]

so you can see all the data in the stores in the devtools vuex tab

[davestewart]

Hi Patrick,

Vue Class Store has a completely different paradigm than Vuex, on purpose.

The Vuex panel in DevTools is all set up to hook into dispatches, commits, etc to update. I don't think it would be the right direction for this lib to try to hook into that (though I'm not adverse to trying if it looked like an easy win)

You can add the store to a Vuex getter to see it in the Vuex DevTools, unfortunately the Vuex panel does not reflect any updates :(

I didn't try on state, because I think in Vuex strict mode that would probably trigger errors. BUt haven't tested.

A cheat I have used to show global stores, is to add them to the <root> component, something like this:

import Vue from 'vue'
import router from './router'
import App from './components/App.vue'
import products from './store/products'
import users from './store/users'

new Vue({
  router,
  
  // provide to all components in the app
  provide () {
    return {
      $store: this.$store
    }
  },
  
  // show on the root component, for debugging
  computed: {
    $store () {
      return {
        products,
        users,
      }
    }
  },
  
  render: h => h(App)
}).$mount('#app')

You then click on that component to see it.

Does that help?