액세스할 수 없습니다.기본 설치 후 자녀 컴포넌트에 $store(vuex)

액세스할 수 없습니다.기본 설치 후 자녀 컴포넌트에 $store(vuex)

그래서 나는 vuex에 완전히 처음이야.vuex를 조심스럽게 vue 앱에 설치했지만 액세스할 수 없습니다.$store를 내 자식 컴포넌트에 저장합니다.

나도 같은 질문을 10개 이상 읽고 많은 변화를 시도했다.다 잘했다고 생각했는데 아직도 안 되더라고요.나는 마침내 여기에 와서 물어보기로 결심했다.아래에 나만의 코드를 입력합니다.

파일 구조(관련 파일만):

|---main.js
|---store.js
|---App.vue
|---components

main.filename:

import '@babel/polyfill'
import Vue from 'vue'

import App from './App.vue'

import './plugins/vuetify'
import './plugins/vue-resource'
import { store } from './store';

require('../node_modules/ol/ol.css');

Vue.config.productionTip = false

fetch('static/App_Config.json')
  .then(function (response) {
    return response.json().then(function (AppConfig) {
      Vue.prototype.$AppConfig = AppConfig;

      new Vue({
        store,
        render: h => h(App)
      }).$mount('#app')

    });
  })

store.syslog:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex, {
});

export const store = new Vuex.Store({
    state: {
        testText: "test string"
    }
});

컴포넌트 내: (인증 완료, 관련 코드만)

<script>
    created () {
        console.log("this.$store_test: ", this.$store);
    }
</script>

---

나는 이미 다음 가능성을 시험해 보았다.

1. in main.main:

사용하다import store from './store';보다는import { store } from './store';

2. in main.main:

사용하다store: store,보다는store,

3. in store.syslog:

사용하다Vue.use(Vuex);보다는Vue.use(Vuex, {});

4. in store.syslog: (1과 일치)4가지 조합을 모두 시도해 보았습니다.)

사용하다export default store = new Vuex.Store보다는export const store = new Vuex.Store

5. 콘솔을 작성한 후크가 아닌 메서드로 배치하고 버튼을 클릭하여 트리거합니다.

6. 콘솔을 다른 하위 컴포넌트에 배치하여 서로 다른 깊은 곳에 중첩합니다.

비슷한 질문을 많이 검색하여 여러 번 시도한 후(20개 이상의 타임 서버 재시작)난 아직 이걸 얻을 수 있어.$스토어입니다 도움이 필요해요

저는 이미 다른 질문들을 읽고 모든 가능성을 시도해 보았기 때문에 이 질문이 중복된다고 생각하지 않습니다.만약 모두 실패했다면 광산 코드로는 뭔가 새로운 게 틀림없어

이것은 유효한 Vuex입니다.store.js파일:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        testText: "test string";
    }
});

export default store;

꼭 작성해주세요getter,mutation그리고.actionVuex 변수의 경우 상태를 직접 처리하지 마십시오.

에서는 문제가 되지 않는다main.js사용한다면store또는store: store,그것들은 아주 똑같은 겁니다.

import store from './store'와 같다import { store } from './store'.

Vue.use(Vuex)그리고.Vue.use(Vuex, {})옵션을 제공하지 않는 한 마찬가지입니다.

컴포넌트에 스토어를 삽입할 필요는 없습니다.앱을 마운트하기 전에 Vuex를 로드하고 있기 때문에 실제로 Vuex를 사용할 수 있습니다.main.js생성된 후크

컴포넌트<script>태그가 올바르지 않습니다.를 사용해 주세요.export default, 다음과 같이 합니다.

<script>
export default {
    created () {
        // Check if console.log like this works better as well
        console.log("Store test:");
        console.log(this.$store);
    }
}
</script>

언급URL : https://stackoverflow.com/questions/53309129/cant-access-this-store-vuex-in-any-child-component-after-basic-installation