vuex：カウントがvueコンポーネントファイルに定義されていません

Question

vuexをlaravelアプリケーションに統合し始めました。公式のvuexドキュメントのサンプルカウンタアプリケーションを使用しています。

JS /コンポーネント/ calculate.vue

<template> 
    <div> 
    <p>{{ count }}</p> 
    <p> 
     <button @click="increment">+</button> 
     <button @click="decrement">-</button> 
    </p> 
    </div> 
</template> 
<script > 
    import store from '../app.js' 

    export default { 
    computed: { 
     count() { 

     return store.state.count 
     } 
    }, 
    methods: { 
     increment() { 
     store.commit('increment') 
     }, 
     decrement() { 
     store.commit('decrement') 
     } 
    } 
    } 
</script> 

JS/WebPACKの私は、この行でstore.state.count定義されていないエラーが発生しました

を構築使用

const calculate = Vue.component('calculate', require('./components/calculate.vue')); 

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



const app = new Vue({ 
    el: '#app' 
}); 

をapp.js return store.count。

Answer 1

あなたはこれは、あなたがこのファイルにVuexをインポートする必要があることは言うまでもない

const calculate = Vue.component('calculate', require('./components/calculate.vue')); 

Vue.use(Vuex) // this line 

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

const app = new Vue({ 
    el: '#app' 
}); 

を追加する必要があります（あなたが言及していないので）、app.jsファイルにあなたのストアを作成している場合。

const app = new Vue({ 
    el: '#app', 
    store // if you're vue-cli/babel else use store: store 
}); 

そしてJS /コンポーネント/ calculate.vue

<template> 
    <div> 
    <p>{{ count }}</p> 
    <p> 
     <button @click="increment">+</button> 
     <button @click="decrement">-</button> 
    </p> 
    </div> 
</template> 
<script > 
// import store from '../app.js' this import is not required 

    export default { 
    computed: { 
     count() { 
     return this.$store.state.count 
     } 
    }, 
    methods: { 
     increment() { 
     this.$store.commit('increment') 
     }, 
     decrement() { 
     this.$store.commit('decrement') 
     } 
    } 
    } 
</script> 

中に

const app = new Vue({ 
    el: '#app' 
}); 

：あなたが変更する必要がその後

、あなたのコードのこの部分storeが想定されているため、インポートは不要ですvueインスタンスの各コンポーネントにアクセスできるようにするには、コンポーネントにthisのインスタンスのインスタンスへのアクセス権が必要です（コンテキストがコールバックによって変更されない限りまたは類似のもの）