Laravel 5.4アプリケーション内でVuex状態を初期化するにはどうすればいいですか

Question

私はLaravel 5.4とVuex 2.2.1をアプリケーションに使用しています。私は次のコードでstore.jsファイルを持っています。

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

Vue.use(Vuex); 

export const store = new Vuex.Store({ 
    state: { 
     testing: 0 
    }, 

    getters: { 
     getTest: state => { 
      return state.testing + 1; 
     } 
    } 
}); 

私はメインのjsファイル（laravel 5.4に同梱されているもの）を持っていますが、これには以下のものがあります。私はVuexインスタンスをここに渡します

require('./bootstrap');; 


import VueRouter from 'vue-router'; 
import { routes } from './routes.js'; 
import { store } from './libs/store'; 


Vue.component('fd-auth', require('./components/Auth.vue')); 
Vue.component('fd-app', require('./components/App.vue')); 



Vue.use(VueRouter); 

const router = new VueRouter({ 
        routes: routes, 
        mode: 'history' 
       }); 

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

Vuexインスタンスが私のブラウザにロードされているのがわかります。

私は店舗内のデータにアクセスしようとすると、しかし、私はエラー「が定義のプロパティを読み取ることができません」を取得。私の状態はまだ定義されていないようです。

私はこれに数時間を費やしており、その周りに私の頭を包み込むことはできません。誰かが私を助けて、私が間違っていることを教えてもらえますか？

これは、コンポーネント内でImにアクセスする方法です。方法で使用される矢印の構文は、thisの値はcomponent instanceないので、this.$storeは不定となります

<script> 
import RevealVisitor from './modals/VisitorReveal.vue'; 

export default{ 

    data:() => { 

     return { 
      storeapp: 'mowgli' 
     } 
    }, 
    methods: { 
     testStore:() => { 
      console.log(this.$store.getters.getTest); 

     } 
    }, 

    components: { 
     'fd-reveal-visitor': RevealVisitor 
    } 
} 
</script> 

Answer 1

。アウト矢印構文を持つこの宣言方法

methods: { 
    testStore() { 
     console.log(this.$store.getters.getTest); 

    } 
},