News Articles vuex

naming duplication using vuex and component

I want a simple thing, fetch a list of item from an API, display it on a component. But I have to think of naming at least 3 things using vuex. I named fecthList on mutation and fecthListAction on action:, then getLists in the component level like so methods: { getLists: function () { […]

nuxt vuex: do not mutate vuex store state outside mutation handlers

Why do I get this error: Error [vuex] Do not mutate vuex store state outside mutation handlers This happens when I call this component. <template lang="pug"> .auth-popup button.auth-popup__button-top.auth-popup__button-top_close( type=’button’ aria-label=’Закрыть форму авторизации’ @click=’$emit(`close`)’ ) h2.auth-popup__title Вход или регистрация form.auth-popup__form(@submit.prevent=’submitHandler’) input.auth-popup__fake-input(v-show=’showFakeInput’ aria-hidden=’true’ autocomplete=’off’ ref=’fakeInput’) label.auth-popup__label(for=’authLogin’) Телефон input#authLogin.auth-popup__input( type=’tel’ autocomplete=’tel’ v-model=’login’ @input=’inputHandler’ ref=’loginInput’ ) p.auth-popup__error(v-if=’login && !isPhoneAuth’) […]

watching a vuex state inside nested modules and login its value in a component whenever it changes

Before downvoting I know a similar question has been asked here But mine is a little bit different, the state I want to watch is inside some nested modules. on the link above they suggested I can watch the state like this: watch: { ‘$store.state.drawer’: function() { console.log(this.$store.state.drawer) } } But my state is in […]

how to return Stripe’s createToken tokenId and use it in another function in vuex

so I call Stripe.card.createToken in my api.js file and want to return the token this function generates so I can use it in my vuex, how can I do that? // api.js export const stripeToken = async ({ cardInfo }) => { const { data } = await Stripe.card.createToken({ cardInfo, }); return data; }; So […]

Vue not creating store when building for production

I have a Vue.js application which when I run "npm run serve" it will create a Vuex store seen by dev tools and will do everything the store is meant to do. However when I run a "npm run build" command then test my application it will only let parts work that don’t depend on […]

How to move an axios call into its own method using vuex and typescript

I have a method in vuex actions that calls the api and updates the user information. What I am trying to do is move the axios call into its own method and have not had any luck. Here is my code async updateProfile({ commit, dispatch }: any, user: User):Promise<User> { console.log(user) console.log("currentUser") const response = […]

How to show total cost of a list of items in table

For an examination I need to create pdf from a vue.js front end app. My issue is with the front-end, I’m using Vue 3 and I need to display the total amount of all the items in the table I’ve made using bootstrap5. Also I need to understand if i can align correctly the table […]

app.appContext.config.globalProperties undefined in unit tests using jest, vue 3 and quasar v2

I have the very simple test below: import { describe, expect, it } from "@jest/globals"; import { installQuasarPlugin } from "@quasar/quasar-app-extension-testing-unit-jest"; import { mount, shallowMount } from "@vue/test-utils"; import App from "../../../src/App.vue"; installQuasarPlugin(); describe("App", () => { it("sets the correct default data", () => { const wrapper = shallowMount(App); const { vm } = wrapper; […]

Vue/Vuex: Distinguish arrays from objects in Proxy objects

As stated here, reactive Vuex objects are returned as Proxy objects. This may not be a problem in most cases, but how do I determine if the Proxy originated from an array or object? Source: JavaSript – Stack Overflow

Laravel, axios: The first login request to server returns strange data {two_factor: false} instead of Auth:id(). How to fix it?

I want make axios return a response of just logged in user’s id. When I was using Laravel Fortify with blade.php files, everything was too simple. Fortify was doing redirect to home page automatically after the successful login. But when I started to use Laravel with vue js and vuex, I faced a problem. When […]

I’m having an Error in Mounted hook (Promise/Async) in my Vue js App

ive setup my Vuex store and modules with all endpoints declared in my actions and connected to the getters too. but my app returns this error compilation. Help me check what might be wrong. …mapActions(‘codes’, [ ‘fetchCode’, ‘fetchCodes’, ‘updateCode’, ‘selectCode’, ‘setSelectAllState’ ]), async fetchData({page, sort}) { let data = { name: ? : […]

Div offsetHeight and other values are different on server vs local

First of all I’ll apologize for my english. So my goal is to create an anchor link menu with Nuxt.js which scrolls to the page section the user has clicked and now I have few different ways of doing it but I’m not sure which is the "correct one". Option 1: I created a menu […]

Client-side rendered virtual DOM tree mismatching server-rendered content

I’m displaying an element in my component depending on a store state value. Getting this error: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. What am I doing wrong? Component: <template> <div v-if="open"> … </div> </template> <script> import { mapState } from ‘vuex’ export default { computed: { …mapState({ open: […]

Vuex setting variables in state from actions

I am trying to populate a variable (onSale) in state but not able to . I am getting my data from a json file. what is wrong with my code ? A separate question is sometimes i see the word ‘context’ instead of ‘state’, what is needed for and when to use it ? Thanks […]

Vite doesn’t support vuex

Sorry for my bad English. I’m creating a Vue application. Now, I want to add vuex to my project. Vuex was added success, but I’m can’t add a vuex store. And when I include the vuex script: import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(Vuex) const store = new Vuex.Store({ state: { userData: "USER!" […]

Issue when trying to show logout button only to logged in user in Vuejs?

NavBar.vue <template> <div class=”hello”> <nav class=”navbar navbar-expand-md navbar-dark bg-dark mb-4″> <div class=”container-fluid”> <router-link to=”/Home” class=”navbar-brand”>Home</router-link> <router-link to=”/Posts” class=”navbar-brand”>Posts</router-link> <div class=”nav-item” v-if=”loggedIn”> <a href=”#” class=”nav-link” @click=”setLogin()”>Logout</a> </div> <div v-else> <ul class=”navbar-nav me-auto mb-2 mb-md-0″> <li class=”nav-item”> <router-link to=”/Register” class=”nav-link” >Register</router-link > </li> <li class=”nav-item”> <router-link to=”/Login” class=”nav-link” @click=”setLogin()” >Login</router-link > </li> </ul> </div> </div> </nav> </div> […]

Laravel Fortify, Vuex. Array to string conversion error. FortifyServiceProvider.php line 40. What’s going on?

I spent nearly whole day to figure out what’s going on. I have login vue component the email and password values need to be sent to server. But the Login controller is built in Fortify controller, so I don’t know why I’m getting error 500 and error 422 (I get them different times, not the […]

use a function in action of auth modules in wizard module in vuex in vue

I have this function in auth.module.js: async [VERIFY_AUTH](context) { if (JwtService.getToken()) { ApiService.setTokenAxios(); return ( ApiService.get("api/customer/me") .then(({ data }) => { console.log("auth request – useer:", data); context.commit(SET_AUTH, data); }) /////////// .catch(({ response }) => { console.log(response); context.commit(SET_ERROR, serviceErrors(; }) ); } else { context.commit(PURGE_AUTH); } }, I want dispatch it in wizard.modules.js [SPOUSES](context, data) { […]

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.