Store vuex가 정의되지 않은 속성 'store'를 읽을 수 없습니다."

Store vuex가 정의되지 않은 속성 'store'를 읽을 수 없습니다."

처음 간단한 앱을 만들려고 했는데 스토어에 문제가 있어요.

나는 주로 가지고 있다.JS

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'

Vue.use(Vuex);


import {store} from './Store.js';
store.commit('increment')

new Vue({
  el: '#app',
  router,
   store,
  template: '<div><App></App></div>',
  components: { App }
});

그래서 내 가게에서.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
});

이벤트 증분을 사용하는 App Component의 하위 구성 요소를 만들기 위해 Component Counter를 만들었습니다.

<template>
    <div>{{ count }}</div>
</template>
<script>

export default {

    name: "Counter",
    computed: {
        count () {
            return this.$.store.state.count
        }
    }

}
</script>

앱 컴포넌트에서 이 컴포넌트를 다음과 같이 부릅니다.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Counter></Counter>
  </div>
</template>

<script>
import Counter from './components/Counter.vue'
export default {
  name: 'app',
  components:{
      Counter
  }
}
</script>

그러나 카운터 컴포넌트에 다음 오류가 있습니다.

[Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 'store'를 읽을 수 없습니다."

에서 발견되다.

---> src\components\Counter에 있습니다.src\App의 vue.표시하다

당신은 작은 실수를 했을 뿐입니다.그래야 한다.$store,것은 아니다.$.store:

<template>
    <div>{{ count }}</div>
</template>

<script>
export default {
    name: "Counter",
    computed: {
        count () {
            return this.$store.state.count
        }
    }
}
</script>

저도 같은 문제가 있어서...Vue로.vue그리고.Vuex로.vuex.js 스토어 파일의 모든 행에서 작동했습니다.

언급URL : https://stackoverflow.com/questions/46976203/store-vuex-cannot-read-property-store-of-undefined