如何从Vue插件访问Vuex？

Question

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

import store from './store';

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

解决：似乎可以做到

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

我的插件添加了一个额外的商店，它有自己的突变和吸气剂。

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)

Answer 2

请参见官方指南这里它规定

Vue.js 插件应该公开一个安装方法。该方法将使用Vue 构造函数作为第一个参数以及可能的选项来调用：

所以你可以很容易地做到这一点。

Vue.use( {
    install(Vue){
        Vue.prototype.$something = function (){
            this.$store...etc
        }
    } 
} )

要使用，只需在组件方法/计算等中执行 this.$something()，或直接在组件标记中作为 {{$something()}}

这将删除需要知道商店实际驻留位置的插件，同时仍然允许您在插件中使用商店。

这是因为它将继承使用它的任何组件的范围，从而提供对所有组件实例属性的访问，包括诸如 $store、$router 之类的内容以及它的任何本地属性，例如计算属性、父级等。本质上是插件的功能就像它直接是组件的一部分一样（例如，如果您将它用作 mixin）。