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
Vue.$pouchDb.removeSync(// ...etc)

Answer 2

应用启动后，您将导入您的商店并将其“追加”到全球Vue。

现在，如果您使用plugin（）插件，则install（）的第一个参数始终是Vue本身，此时Vue已经可以访问商店了，在install方法中，您可以简单地启动

install(vue, opts) {
  ... here your can acces to vue.$store ....
}

Answer 3

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

要使用，只需在组件方法/计算方法等中执行此操作。$ something（），或直接在组件标记中作为{{$ something（）}}

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

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

Answer 4

对于 Vue 3

如果您想知道如何在 Vue 3 中做到这一点，您可以使用以下方法。

plugin.js

export default {
  install(app) { // app instance
     console.log(app.config.globalProperties.$store)
  }
}

main.js

import store from './pathtostore'
import plugin from './plugin'

createApp(...).use(store).use(plugin)

Answer 5

您可以按照plugins的导入方式来导入商店，即：

import store from './store'

然后您可以使用store.commit：

export default {
    install(vue, opts){
        Vue.myGlobalFunction = function(){
            store.commit('myMutation', arguments)
        }
    }
}

如何从Vue插件访问Vuex？

5 个答案: