[Vuejs]-Access Vuex Store in Blade file | Laravel – Vue js

by

-1👍

First Leave laravel out of it. You cant anything with blade for that.

Blade is backend for render in php.

And Vue is usually spa thing.

It is purely vuex5.0 / Pinia https://pinia.vuejs.org job to do.

Best practice is Create the store of every type of data you need like
https://github.com/puneetxp/the check test directly in it totally in JavaScript you can see like create Store assume it is for Product data.

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(useActive_roleStore, import.meta.hot))
}

then we can use in your component

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

for use use it on useProductStore().items as my design you can make your own if you want.

Leave a comment