在 Blade 文件中访问 Vuex Store | Laravel - Vue js答案

【问题标题】：Access Vuex Store in Blade file | Laravel - Vue js在 Blade 文件中访问 Vuex Store | Laravel - Vue js
【发布时间】：2022-11-11 01:17:22
【问题描述】：

如何访问 Blade 文件中 Vuex 4 存储中定义的方法或变量？我正在使用从 vite 编译的 app.js。显然在 Vue js 的组件中我可以访问商店，我想知道是否也可以在刀片文件中进行访问。 Vue js #app 实例当然必须是其中之一。如果在我的刀片文件的末尾我写这个

 <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.

【问题讨论】：

不，你不能。你不应该。这应该是 vue 应用程序的一部分。
首先你应该使用 Pinia 那是新的 Vuex。我正在准备答案。

标签： javascript laravel vue.js vuex store

【解决方案1】：

首先将 laravel 排除在外。

这纯粹是 vuex5.0 / Pinia https://pinia.vuejs.org 要做的工作。

最佳实践是创建您需要的每种数据类型的存储，例如 https://github.com/puneetxp/the 完全在 JavaScript 中，您可以看到像 create Store 一样假设它用于产品数据。

import { defineStore, acceptHMRUpdate } from "/js/vue/pinia.js";
export const useProductStore = defineStore({
    id: "Product",
    state: () => ({
        rawItems: [],
    }),
    getters: {
        items: (state) => state.rawItems
    },
    actions: {
        addItem(product) {
            this.rawItems.push(product)
        },
        removeItem(id) {
            this.rawItems = this.rawItems.filter(i => i.id != id);
        },
        editItem(product) {
            this.rawItems = this.rawItems.filter(i => i.id != product.id);
            this.rawItems.push(product);
        },
        upsertItem(products) {
            products.forEach(product => {
                this.rawItems = this.rawItems.filter(i => i.id != product.id);
                this.rawItems.push(product);
            });
        }
    },
})
if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useProductStore, import.meta.hot))
}

if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useActive_roleStore, import.meta.hot))
}

然后我们可以在您的组件中使用

import { useProductStore } from "/js/vue/Store/Model/Product.js";
export default {
    template: ``,
    data() {
        return {
            useProductStore,
        }
    }
}

在 useProductStore().items 上使用它作为我的设计，如果你愿意，你可以自己制作。

【讨论】：