在Laravel 8上使用vuex与惯性堆栈

Question

我正在学习如何使用Vuex，我正试图在带有惯性堆栈的Laravel 8上使用它，我正在使用vue 3。

存储/index.js

import { Store } from 'vuex'

export const store = new Store({
state () {
return {
count:0
}
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})

这是我的app。js

require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import Vuex from 'vuex';
import { store } from './Store'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(Vuex)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });

但是我总是以控制台错误结束:

app.js:106250 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

我也试过了:

.use(store)

但它似乎不起作用。如果有人能指出我错过了什么或我做错了什么，我将不胜感激

Answer 1

我在使用vuex 3.x.x时也遇到过这个问题我这样做了，它工作了:

npm uninstall --save vuex

然后我重新安装它:npm install --save vuex@next(vuex 4.x.x)
在app.js中，我使用.use(store)。
我不知道它是否改变了什么但是在store/index.js中我导出为export default new Store({...})

Answer 2

Store/index.js

import { createApp } from 'vue';
import { createStore } from 'vuex';
const store = createStore({
state: {
count:0
},
mutations:{
INCREMENT(state){
state.count++
},
DECREMENT(state){
state.count--
}
}
})
export default store

这是我的app.js

require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import store from '@/store/index';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props),store })
.use(plugin)
.use(store)
.mixin({ methods: {
route,
}
})
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });