Vuex에서 vue 인스턴스에 액세스하는 방법

Vuex에서 vue 인스턴스에 액세스하는 방법

글로벌 변수를 선언합니다.main.jsVue.js 프로젝트입니다.

Vue.prototype.$API = "myapihere"

어디서든 이걸 쓰고 싶은데 이걸 쓰면 제대로 되는 것 같아요.this.$API.

하지만 Vuex에서는 그것은 작동하지 않는다.

console.log(this.$API);

여기서this.$API정의되어 있지 않습니다.

사용방법$APIVuex에 있습니다.

Vue 2 및 Vuex 3의 답변

스토어에서는 vue 인스턴스에 액세스하여 vue 인스턴스에 액세스할 수 있습니다.this._vm

const store = new Vuex.Store({
  mutations: {
    test(state) {
      console.log(this._vm);
    }
  }
});

Vue 3를 쓰고 있는데Vue.prototype.$foo이 버전에서는 삭제된 것 같습니다.또, 제 VueX 버전에는,this._vm.

Vue 3 docs에서 권장하는 Provid / Inject 방법을 살펴보았습니다.컴포넌트 내에서는 글로벌에 액세스 할 수 있었지만 스토어 내에서는 액세스 할 수 없었습니다.

제가 선택한 솔루션은 Vue 객체와 표준 속성에 globalProperties를 사용하는 것입니다.store앱을 마운트하기 직전에 설정합니다.

main.js:

import store from './store/index';
import App from './App.vue';

// Load custom globals
import conf from '@/inc/myapp.config';

const app = createApp(App)
  .use(store);

// Register globals in app and store
app.config.globalProperties.$conf = conf;
store.$conf = conf;

app.mount('#app');

제가 좋아하는 것은 매장이나 컴포넌트 모두에서 글로벌에 접속할 수 있다는 것입니다.

컴포넌트:

export default {
  data() {
    return {
    };
  },
  created() {
    console.log( this.$conf.API_URL );
  },
}

...접근할 수 있습니다.this.$conf.API_URL행동, 돌연변이, 게터도 같은 방식으로요

이 솔루션을 발견하면 스토어 내에서 Vue 인스턴스 전체에 액세스할 필요가 없어졌지만 어떤 이유로든 Vue 인스턴스를 할당할 수 있습니다.store.$app = app; 의 같은 장소에main.js.

다음의 2개의 어프로치가 있습니다.

1. 속성을 전달합니다(또는_vm컴포넌트의 인수로 Vuex 내부의 속성)

   methods: {
     this.$store.dispatch('someAction', this.$API)
   }
   

2. 동일한 변수를 선언하여 다른 파일에서 내보내고 main.js 및 Vuex 파일에서 사용합니다.

   // api.js
   export const API = "http://localhost:5000/api"
   

   // main.js
   import { API } from './api.js
   ...
   Vue.prototype.$API = API
   

   // store.js
   import { API } from './api.js
   
   // you can use API now!
   

저는 개인적으로 두 번째에 기대고 싶지만 API 경로를 Vue에 전혀 저장하지 않습니다.api.js서비스로서의 파일(file as a service)을 사용하여 모든 Ajax 콜을 실행하고 필요한 장소에서 해당 파일을 사용할 수 있습니다.

사용하다this._vm

이유는 이렇다

액세스 시 디폴트로this에vuex store그것이 가리킬 것이다store이렇게 출력됩니다.

그 후엔, '그것'이라고 불리는 것이 있습니다._vm여기 진열되어 있다

하도록_vmvue 컴포넌트에 액세스하려면this._vue

다음과 같은 vue 인스턴스의 getter를 만드는 것이 좋습니다.

const store = new Vuex.Store({
  getters: {
    vue(state) {
      return this._vm
    }
  }
});

//so you can use it across your store
store.getters.vue

//Note
//the above way of accessing getter works on non `namespaced` stores 

최근 Vuex 4.* 및 Vue 3.*에서는this.$app스토어 객체에 대해 정의되지 않았습니다.대신 Vue Router는 다음과 같이 정의되어 있습니다.this.$router.

javascript의 경우 앱을 스토어에 설치하는 방법은 다음과 같습니다.

코드는 다음과 같습니다.router.app = app;들어에는 다음과 같은 액션이 .let app = this.$router.app;

언급URL : https://stackoverflow.com/questions/60491988/how-to-access-vue-instance-in-vuex