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

Question

我正在学习如何使用 Vuex，我正在尝试在 Laravel 8 和 Inertia Stack 上使用它，我正在使用 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--
        }
    }
})

这是我的 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' });

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

Using vuex on Laravel 8 with Inertia Stack

inertiajs

laravel

vue.js

vuex