Using "Vue.Use(VuexUndoRedo)" causes: "TypeError: Cannot read property 'subscribe' of undefined"

[driekus77]

Looks promising this Undo Redo component!

Unfortunately I get an error when add/uncommenting:
Vue.use(VuexUndoRedo)

Using Chrome browser I get:

vue.esm.js?efeb:1741 TypeError: Cannot read property 'subscribe' of undefined
at VueComponent.created (plugin.js?d365:14)
at callHook (vue.esm.js?efeb:2921)
at VueComponent.Vue._init (vue.esm.js?efeb:4630)
at new VueComponent (vue.esm.js?efeb:4798)
at validateModel (index.js?112c:488)
at VueComponent.data (index.js?112c:510)
at VueComponent.mergedDataFn (vue.esm.js?efeb:1169)
at VueComponent.mergedDataFn (vue.esm.js?efeb:1169)
at getData (vue.esm.js?efeb:3417)
at initData (vue.esm.js?efeb:3374)

Added the mutation emptyState in all the stores ( core and admin which are namespaced ).

My package.json:

"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.16",
"vuelidate": "^0.6.2",
"vuex": "^3.0.1",
"vuex-undo-redo": "^1.0.5",

Thanks for any help!

[chrisrowe]

Make sure you're passing store when instantiating your root Vue instance.

[mgrsskls]

Hi,

I'm experiencing the same (store is passed properly) and it's also reproducible on your demo (https://vjo3xlpyny.codesandbox.io/). Everything works fine though.

I'm a complete vue newbie, but it seems to me as if the created method is called too early. this.$store doesn't exist there yet, then created is called again and then this.$store exists.

[claudiocabral]

Just to help future users that might also find this problem: I managed to avoid the error by adding the module after creating the Vuex instance and before creating the Vue instance:

Vue.use(Vuex)

let store = new Vuex.Store({
  state: {
    val: 0
  },
  mutations: {
    emptyState() {
      this.replaceState({ val: 0 })
    }
  }
})

Vue.use(VuexUndoRedo)

new Vue({
  store: store,
  components: { App },
  router,
  template: '<App/>',
}).$mount('#app')

[anthonygore]

Sorry for the delay.

So the issue, as @claudiocabral has identified, is that you must install this plugin after you've installed Vuex and created a store.

I think I'm going to update the plugin so it will throw an error if you don't do this and provide an error message that explains it; I don't think there's any other way.

I'll also update the docs to explain this, too.

[claudiocabral]

Hey,

I think improving the documentation to include that would help a lot too. I'll have a look at the code and see if I can come up with a solution, since this is a bit of a weird pattern, but I can see how it might be hard to change

[anthonygore]

I have mentioned it in the docs now. And yeah, open to a better solution if you have one.