vuejs2 - 如何从Vue插件访问Vuex？

Question

如何从插件访问商店？控制台返回未定义。

import store from './store';

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

Answer 1

最近，我也必须这样做以制作pouchDb插件，并提出了一种新方法。

创建第一个Vue对象时，可以执行此操作。

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
  }
})

我的插件添加了一个额外的商店，它是自己的变异和 getter 。

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

在构造函数中，我存储商店

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

然后在其他功能中使用它

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

在商店中流传有点欺骗，但似乎效果很好。像这样在整个应用程序中都可以使用

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

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