Vue 플러그인에서 Vuex에 액세스하는 방법

Vue 플러그인에서 Vuex에 액세스하는 방법

플러그인에서 스토어에 액세스하려면 어떻게 해야 합니까?콘솔이 정의되지 않았습니다.

import store from './store';

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

저도 얼마 전에 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)

공식 가이드는 여기를 참조하십시오.

Vue.js 플러그인은 설치 방법을 표시합니다.메서드는 Vue 컨스트럭터와 함께 첫 번째 인수로 호출되며 가능한 옵션도 함께 호출됩니다.

아주 쉽게 할 수 있습니다.

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

사용법은 이것만 하면 됩니다.컴포넌트 메서드/메시지 등의 $something() 또는 컴포넌트 마크업 {{$something()}으로 직접 $something()

이렇게 하면 플러그인이 제거되고 플러그인의 스토어를 활용할 수 있습니다.

이는 컴포넌트를 사용하는 모든 컴포넌트의 범위를 상속하기 때문에 $store, $router 등의 컴포넌트 인스턴스 속성과 계산 속성, 부모 등의 로컬 속성에 대한 액세스를 제공하기 때문입니다.기본적으로 플러그인은 컴포넌트의 직접적인 일부인 것처럼 기능합니다(예를 들어 플러그인을 믹스로 사용한 경우).

Vue 3의 경우

Vue 3에서의 조작 방법에 대해서는, 이하의 것을 사용할 수 있습니다.

plugin.module

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

main.discloss.main.discloss.

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

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

앱이 시작되면 스토어를 Import하여 글로벌하게 Vue에 "추가"할 수 있습니다.

플러그인을 사용하는 경우 install()의 첫 번째 파라미터는 항상 Vue 자체입니다.이 시점에서 Vue는 이미 스토어에 액세스 할 수 있습니다.설치 방법에서는 간단하게 시작할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/53089441/how-to-access-vuex-from-vue-plugin