Как получить доступ к Vuex из плагина Vue?

Question

Как я могу получить доступ к своему магазину из моего плагина? Консоль возвращает неопределенное значение.

import store from './store';

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

Решено: кажется, сделав это

import { store }

исправляет это. Сделаю ответ, когда позволит. Я не совсем уверен, почему это работает, но я думаю, что мой магазин экспортирует магазин вместо стандартного.

Answer 1

Когда приложение запускается, вы импортируете свой магазин и «добавляете» его в Vue, глобально.

Теперь, если вы используете () свой плагин, первым параметром install () всегда будет сам Vue, и в этот момент Vue уже имеет доступ к хранилищу, в методе установки вы можете просто запустить

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

Answer 2

См. Официальное руководство здесь , где указано

Плагин Vue.js должен предоставлять метод установки. Метод будет вызываться с конструктором Vue в качестве первого аргумента вместе с возможными параметрами:

Так что вы можете сделать это очень легко.

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

Чтобы использовать, просто сделайте это. $ Something () в компонентах методов / вычисляется и т. Д., Или непосредственно в разметке компонента как {{$ something ()}}

Это удалит плагин, который должен знать, где на самом деле находится магазин, и в то же время позволит вам использовать магазин внутри плагина.

Это связано с тем, что он будет наследовать область действия любого компонента, который его использует, обеспечивая тем самым доступ ко всем свойствам экземпляра компонентов, включая такие вещи, как $ store, $ router, а также любые его локальные свойства, такие как вычисляемые свойства, родители и т. Д. . По сути, плагин функционирует так, как если бы он был частью компонента (например, если вы использовали его как миксин).

Answer 3

Мне недавно тоже пришлось сделать это, чтобы создать плагин 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 4

Вы можете импортировать свой магазин так же, как и для плагинов , а именно:

import store from './store'

тогда вы можете использовать store.commit:

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