VueJS Reactive Binding for a Plugin - How To?

Question

I am working on a Vue plugin for Pouch/CouchDB which will be open sourced, but as long as i can figure out an issue i am having:

Currently i am trying to make the plugin

Answer 1

I think you don't need to use these internal APIs like Vue.util.defineReactive or this.$bucket._state.projects.__ob__.dep.notify()

Because Vue itself is reactive, you can use a Vue instance to store the data. There is no need to reinvent the reactivity system.

Create a Vue instance in the constructor:

this.storeVM = new Vue({ data })

and use getter to delegate the .state to storeVM.$data

get state () {
  return this.storeVM.$data
}

so when you access myPlugin.state, you are accessing the data of the Vue instance.

I created a very simple reactive plugin example: http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

No need to use defineReactive or notify the dependencies by yourself if a Vue instance can do everything for you. In fact, this is how Vuex works.