How to access Vuex from Vue Plugin?

Question

How can I access my store from my plugin? Console returns undefined.

import store from './store';

export default {
    install(vue, opts){
        Vue.myGlobalFunction = function(){
            console.log(store);
        }
    }
}

Answer 1

I recently had to do this too to make a pouchDb plugin, and came up with a new way.

When you create your first Vue object, you can do this.

import PouchDb from '@/pouch_db/PouchDbPlugin'

let DefaultVue = Vue.extend({
  components: {App},
  store,
  created () {
    Vue.use(PouchDb, this.$store) // Create it by passing in the store you want to use
  }
})

My plugin adds an additional store, and it's own mutations and getters.

export default {
  install (Vue, store) {
    store.registerModule('PouchDb', pds)
    const pouchDb = new PouchDb(store)
    Vue.pouchDb = pouchDb
    Vue.prototype.$pouchDb = pouchDb
  }
}

Inside the constructor, I store the store

class PouchDb {
  constructor (store) {
    this.store = store
    // ... etc.
  }
  // ... more functions
}

And then use it in other functions

class PouchDb {
    // ... constructor and other functions
    async addSync (docId) {
       this.store.dispatch('PouchDb/addSync', docId)
    }
}

It's a bit of a cheat to pass in the store, but seems to work nicely. It's usable throughout the app like this

// Inside vuex store
Vue.pouchDb.addSync(// ...etc)

// inside component
this.$pouchDb.removeSync(// ...etc)