如何在Laravel Blade文件中访问Vuex 4 Store？

我用Vite编译的app.js，Vue组件里能正常访问Vuex 4的Store方法和变量，现在想在已存在Vue实例的Blade文件里实现同样操作，在Blade末尾添加了这段代码：

<script>
    import {useStore} from "vuex";
    import {onMounted, watch, ref, defineComponent} from 'vue'

    export default {
        setup() {
            const click = () => {
                store.commit('mutazione');
            };
            onMounted(() => {
                alert('test');
            })

            const store = useStore();
            return {
                store,
                click
            }
        },
    }
</script>

控制台出现错误：

Unexpected token '{'. import call expects exactly one argument.

解决方法 #

原因 #

浏览器原生<script>标签不支持ES模块的import语法（除非声明为type="module"），而且这种写法是在定义Vue组件，无法直接和页面已有的Vue实例关联。

方案1：直接使用全局暴露的Store #

在Vue入口文件（比如main.js）里把Store暴露到全局：

// main.js
import { createApp } from 'vue'
import store from './store'
import App from './App.vue'

const app = createApp(App)
app.use(store)
app.mount('#app')

// 把Store挂载到window对象
window.$store = store

然后在Blade里直接调用：

<script>
    const click = () => {
        window.$store.commit('mutazione');
    };
    // 页面加载后执行onMounted里的逻辑
    alert('test');
</script>

方案2：用模块脚本结合Vue上下文（适合Composition API） #

把脚本声明为模块类型，通过Vue的上下文获取Store：

<script type="module">
    import { useStore } from 'vuex';
    import { getCurrentInstance } from 'vue';

    // 获取当前Vue应用实例的上下文
    const instance = getCurrentInstance();
    const store = useStore(instance.appContext);

    const click = () => {
        store.commit('mutazione');
    };

    alert('test');
</script>

注：这种方式需要确保Vite能正确解析模块路径，且只能在Vue的上下文环境中生效。

方案3：注册全局方法（最稳妥） #

在main.js里把需要调用的Store操作封装成全局方法：

// main.js
import store from './store'

window.commitMutazione = () => {
    store.commit('mutazione');
}

然后在Blade里直接调用这个全局方法：

<script>
    const click = () => {
        commitMutazione();
    };
    alert('test');
</script>

内容的提问来源于stack exchange，提问作者Giampy71