News Articles vuex

Provide/inject or Vuex?

I have a list of cars. Each item of that list has all the information about some of the cars. Also each item is a parent component to many other components – image, price, characteristics, etc – all that info is in separate components. The information about all those cars is stored in Vuex. Now […]

Vue 3 || Vite || Vuex || if running npm run dev, I will get ‘Uncaught ReferenceError: Cannot access ‘store’ before initialization’ in the console

I don’t know why Iam getting this error. Everything should work fine, or? This is how my main.js looks like import "tailwindcss/tailwind.css" import { createApp } from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ import store from ‘./store’ import axios from ‘axios’ import ‘./index.css’ import { io } from "socket.io-client" const token = […]

Large object in Vuex store causes severe performance issues

I’m working on a Vue/Vuex project and have encountered some horrible performance issues with my store’s actions/mutations. All of my actions are taking over 100 ms to complete regardless of what they are doing. It doesn’t matter what the action/mutation is doing; even empty mutations take over 100 ms to complete. I have debugged this […]

How do you recommend to change the state for display/hiding elements in a for-loop in Vue 3 with Composition API and Vuex?

Question: How is the best way to display or hide elements in the DOM or State with Vuex and Compositon API in Vue 3? Description: I have different "Levels" on flat data. I need to slice the right index from the Vuex computed property which will change the state and the DOM should update automatically. […]

how can i load data to module from a component on nuxt

I want to load the data from GS stored in rows in the component to a store module called rows.js. it used to work but then i added the modules for store and now i cant seem to get the computed data for rows store/rows.js : export const state = () => ({ rows: [], […]

Changes to object after it is pushed to Vuex store reflect in the store

To create a new record, I define the record object within the components data() function, and bind it to form fields using v-model. This object is then passed to a Vuex action that POSTs the new record to the back end, and then sends the object to the corresponding mutator. The issue is, when changes […]

How can i include file of styles for only one template?

I have a Materialize.min.css link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> And i need to include this file only in one template of Vue, because it damages other files. Is it possible to do? Source: Vue – Stack Overflow

Vuex store state : how to mix the function with variables for reseting state values at single shot

I have a Vuex Store where I need to reset the variables based on some changes within the application so I am using something like this and everything is working as expected: const getDefaultState = () => { return { showModal: false, nodeCounter:0, nodeInfo: [], } } export const state = () => getDefaultState() export […]

Vue this.watch() function parameters

I want to watch a variable in Vue inside a Vuex store module. What I’ve got is the following, using this.watch(), and I’m assuming that the parameters are meant to be this.watch(oldValue, newValue), following the convention of using watchers in a Vue module. this.watch( () => myVariableToWatch, () => { console.log(‘myVariableToWatch has changed’); }); Is […]

Vuex Getter not pulling data

I have a vuex store that I am pulling data from into a component. When the page loads the first time, everything behaves as expected. Yay. When I refresh the page data is wiped from the store as expected and pulled again into the store as designed. I have verified this is the case monitoring […]

How to update a table’s data in VueJS?

I have a table with date filters (it’s a panel with 4 options: day/week/month/year). My task is create pagination. After selection of the filter with specific date range, I fetch data from API and save its response to vuex store. I logged everything – fetching and vuex work fine. But when I start to change […]

Initialize nested types in vuex (typescript)

Based on this. The following code: import * as I from ‘../api/interfaces’ import { InjectionKey } from ‘vue’ import { createStore, useStore as baseUseStore, Store } from ‘vuex’ interface State { productsInVendingMachine: Array<I.Product>; order: I.Order; } export const key: InjectionKey<Store<State>> = Symbol() export const store = createStore<State>({ state: { loginSuccess: false, loginError: false, logoutSuccess: false, […]

Laravel API Eloquent Where Clause with Vue not working

My question is, why doesn’t my where clause work? I use a Laravel API for my vue (with vuex) project. Here’s the Controller function public function specific_client(Request $request) { $id = $request->id; return JsonResource::collection( Measurement::where(‘client_id’, ‘=’,$id) ->with([‘clients’, ‘measurement_data’])->get()); } I also use vuetify, this is how I get the client_id : <v-select v-model="cnr" :items="clients" item-text="clientnumber" […]

Store JWT Token in closure

I have heard that JWT tokens are recommended to be stored as follows: access_token in the application memory (as an example I was given – closures) refresh_token in cookie entries (HttpOnly) At the moment, my access_token is stored in localStorage and is taken to check the authorization status: isLoggedIn: state => !!state.token in Vuex refresh_token […]

How to render Markdown reactively from localStorage?

I can get markdown in string format from localStorage, transform it with marked function into markdown and assign it to reactive state so it can be rendered in my component: <template> <div class="about-info"> <div class="text-container"> <div v-html="state.content"></div> </div> </div> </template> <script setup> import {reactive} from "vue"; import DOMPurify from "dompurify"; import marked from "marked"; const […]

export ‘HasError’ (imported as ‘HasError’) was not found in ‘vform’ (possible exports: Errors, Form, default)

I use the following code below in the app.js, it is not working import { Form, HasError, AlertError } from ‘vform’ Vue.component(HasError.name, HasError) Vue.component(AlertError.name, AlertError) It got error as the picture below Source: Vue – Stack Overflow

Sending object as a props in Vue.js and getting TypeError and Warning

I am trying to pass an object into my child component but it comes undefined. So my parent component: <template> <section id="cart-page" class="row"> <div v-for="items in cart" :key="items.product.id"> <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12"> <div class="title">WARENKORB</div> <SoldTickets :items = "items"/> </div> </div> </section> </template> <script> import image from "../../../../img/Hallenbad.jpg"; import CheckBox from "../components/CheckBox"; import SoldTickets from […]

Vuex doesn’t detect actions or mutations but detects getters fine

I’m trying to set up Vuex in my Vue app. app.js require(‘./bootstrap’); window.Vue = require(‘vue’).default; import Vuex from "vuex"; Vue.use(Vuex); import storeData from "./store"; const store = new Vuex.Store( storeData ) Vue.component(‘home’, require(‘./components/Home.vue’).default); const app = new Vue({ el: ‘#app’, store }); store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const state […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.