Using vuex on Laravel 8 with Inertia Stack

I'm learning how to use Vuex, and I'm trying to use it on a Laravel 8 with Inertia Stack, i'm using vue 3.

Store/index.js

import { Store } from 'vuex'


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

And here's my 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' });

But I always end up with a console error:

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

I've also tried:

.use(store)

But it doesn't seem to work. I'll appreciate if someone can point me what i'm missing or what I'm doing wrong

Solution 1:

I had this problem too with vuex 3.x.x I did this and it worked:

npm uninstall --save vuex

Then i reinstalled it : npm install --save vuex@next (vuex 4.x.x)
In app.js I used .use(store).
And I don't know if it change anything but in store/index.js I exported as export default new Store({...})