如何让我的 Vuex 状态在我的 laravel 5.4 应用程序中初始化

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 实例已加载到我的浏览器中。

但是，当我尝试访问商店中的数据时，出现 "Cannot read property of defined" 错误。看来我的状态还没有定义。

我在这上面花了好几个小时，只是无法全神贯注。谁能帮帮我，告诉我哪里做错了。

这就是我在组件中访问它的方式。

<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

当箭头语法与方法一起使用时，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);

    }
},

如何让我的 Vuex 状态在我的 laravel 5.4 应用程序中初始化

How can I get my Vuex state to initialise within my laravel 5.4 application

laravel-5

vuejs2

vuex