惯性栈在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 (vuex4.x.x)

在app.js中，我使用了.use(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' });