ストアvuexは「

Question

を未定義のプロパティ「店」を読み込めません、私は最初のシンプルなアプリを作成しようとしましたが、私は店に問題がある。

私は私の店でそうmainJS

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++ 
     } 
    } 
}); 

だから私はそう、イベントインクリメントを使用するアプリケーションコンポーネントの子コンポーネントを作成します私は

<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]: Error in render: "TypeError: Cannot read property 'store' of undefined"

found in

---> at src\components\Counter.vue at src\App.vue

Answer 1

小さな間違いをしただけです：$storeでなく、でなければなりません：。

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

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