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

Question

我正在使用Laravel 5.4和Vuex 2.2.1作为应用程序。我有一个带有以下代码的store.js文件。

.ebextensions

我有一个主要的js文件（与laravel 5.4一起提供的文件），具有以下内容。我在这里传递了Vuex实例

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

我可以在浏览器中看到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
});

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

    }
},