Larvel 5.4 애플리케이션 내에서 Vuex 상태를 초기화하려면 어떻게 해야 합니까?

Larvel 5.4 애플리케이션 내에서 Vuex 상태를 초기화하려면 어떻게 해야 합니까?

애플리케이션으로 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 파일(라벨 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 인스턴스가 로드된 것을 확인할 수 있습니다.

그러나 저장소 내의 데이터에 액세스하려고 하면 "정의된 속성을 읽을 수 없습니다" 오류가 발생합니다.아직도 제 상태가 명확하지 않은 것 같습니다.

저는 이 일에 몇 시간을 소비했지만 머리를 감을 수가 없습니다.누가 저를 도와서 제가 무엇을 잘못하고 있는지 말씀해 주시겠습니까?

이것이 구성요소 내에서 액세스하는 방법입니다.

<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>

화살표 구문이 메서드와 함께 사용되는 경우, 값this아닙니다component instance,그렇게this.$store정의되지 않습니다.

   methods: {
        testStore: () => {
            console.log(this.$store.getters.getTest); // `this` is window object here.

        }
    },

화살표 구문이 없는 선언 메서드를 피하려면

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

    }
},

언급URL : https://stackoverflow.com/questions/42778826/how-can-i-get-my-vuex-state-to-initialise-within-my-laravel-5-4-application