Laravel 5 如何在我的laravel 5.4应用程序中初始化Vuex状态
我将Laravel 5.4和Vuex 2.2.1用于一个应用程序。我有一个store.js文件,其中包含以下代码Laravel 5 如何在我的laravel 5.4应用程序中初始化Vuex状态,laravel-5,vuejs2,vuex,Laravel 5,Vuejs2,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 => {
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文件,是Laravel5.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实例已加载到我的浏览器中
但是,当我尝试访问存储中的数据时,我得到了一个定义错误的cannotread属性。看来我的状态还没有确定
我已经花了好几个小时在这个问题上了,我简直无法控制自己。谁能帮我一下,告诉我我做错了什么
这就是我在组件中访问它的方式
<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>
当箭头语法与方法一起使用时,此值不是组件实例,所以此.$store将未定义
methods: {
testStore: () => {
console.log(this.$store.getters.getTest); // `this` is window object here.
}
},
要避免这种情况,请使用out-arrow语法声明方法
methods: {
testStore() {
console.log(this.$store.getters.getTest);
}
},
兄弟!姐妹!我不管你是不是火星人,你救了我!非常感谢你。我永远也想不到。非常感谢。