Struggling to access an element within the Vue state (Vue.js/JS/TS)

Encountered a challenge today while working with Vue.

In a function, I cannot retrieve an element from a state. However, when I use console.log() to check the state, the element is present. Any suggestions on how to rectify this issue?

Here's the relevant code:

export const actions: ActionTree<IState, IState> = {
    getUsers(context) {
      // eslint-disable-next-line no-console
      console.log('getUsers().context=', context);
      // eslint-disable-next-line no-console
      console.log('getUsers().context.state=', context.state);
      // eslint-disable-next-line no-console
      console.log('getUsers().context.state.baseURL=', context.state.baseURL);
      // do something...
    }
}

The log in the console:

The first log displays correctly. The value of baseURL is visible. https://i.sstatic.net/yZRGI.png

The second log also shows the value of baseURL. https://i.sstatic.net/sIDzW.png

The third log presents the problem. The value of baseURL cannot be retrieved!!! https://i.sstatic.net/KpHBK.png

Information from package.json file:

{
  "name": "ui",
  "version": "2.0.0-rc",
  "private": true,
  "author": "Leo Wu <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b6b4a5aeafa6b8a8af81a6aca0a8adefa2aeac">[email protected]</a>>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ... (remaining content omitted for brevity)

If more information is required, please feel free to ask.
Appreciate any assistance provided.

Answer №1

Shoutout to @acdcjunior and @TimWickstrom,
After some digging, I've uncovered the source of the problem and a fix. Let's compare the code snippets to see where the issue lies.

The original problematic code:

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app');

store.commit(UPDATE_BASE_URL, {
  baseURL: process.env.VUE_APP_BASE_URL,
});


The revised working code:

  new Vue({
  router,
  store,
  vuetify,
  created() {
    this.$store.commit(UPDATE_BASE_URL, {
      baseURL: process.env.VUE_APP_BASE_URL,
    });
  },
  render: h => h(App),
}).$mount('#app');


Solution in action snapshot:
https://i.sstatic.net/8NMzH.png
Hopefully, this will assist those facing a similar challenge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The attempt to access https://registry.npmjs.org/yargs was unsuccessful

I am experiencing difficulties in downloading packages from npm. When attempting to download from https://registry.npmjs.org/yargs, I am receiving an error message that states: write EPROTO 101057795:error:14077419:SSL routines:SSL23_GET_SERVER_HELLO:tls ...

What could be causing the unexpected "undefined" result when trying to retrieve values from my array

Let me give you a brief overview. I am currently working on a Calendar app using React, react-calendar, and date-fns. My current challenge involves extracting values from an array of objects within a forEach loop. Here is the array in question: datesToAd ...

Merge multiple Javascript files into one consolidated file

Organizing Files. /app /components /core /extensions - array.js - string.js /services - logger.js /lib - core.js Core.js (function() { 'use strict'; an ...

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

Tips for customizing the default configuration files in reactJs bootstrapping using npm

I've generated a simple greeting world ReactJS application by using the create-react-app command from npm. The directory structure provided by the application template is as follows: https://i.sstatic.net/y3K5n.png The contents of my package.json fi ...

Pictures that can be chosen in a fashion similar to checking off a box

I am just starting out in the world of web development and I have a specific idea in mind. I want to create images that act like checkboxes, where only one can be selected at a time. Here is an example of what I'm looking for: https://i.sstatic.net/Nu ...

The type 'contextPaneTitleText' argument cannot be assigned to the parameter type 'key of RemoteConfig'

I am encountering an issue when using the following code snippet: const contextPaneTitleText = useFeature("contextPaneTitleText").asString(); This code is resulting in an error message: Argument of type '"contextPaneTitleText" ...

Transitioning from angular version 5.2 to the latest angular 6.1 version

Currently, I find myself on node 8.11 and utilizing VS code. The project was originally built in version 5.2.5 but has been inactive for some time now. Within my project, the following modules are present: import { BrowserModule } from '@angular/plat ...

Save the raw InputMask data in Formik with Material-UI

I currently have Input Mask implemented with a customized Material UI text field inside a Formik form: <InputMask mask="999-99-9999" maskChar="X" value={values.ssn} ...

DailyCodingChallenge: Discover two elements in an array that add up to a specified value

As someone who is relatively new to coding, I recently signed up for the daily coding problem mailing list and received the following question: If given a list of numbers and a specific number k, can you determine whether any two numbers from the list a ...

Unable to dismiss the modal on Ionic-Vue version 5.5.2

     It's a challenge trying to figure out how to close a component from within another in this version of @ionic/[email protected]. Specifically, I've been stuck attempting to assign a reference (< Login ref="modal"/>) to the ...

Unlocking the power of JSONB column filtering in KNEX with Typescript/Javascript: A comprehensive guide

Could someone please assist me with this query issue? I have a table with a jsonb column that stores stringified data in the following format: entry: { 1: "data1", 2: "data2" } I am trying to retrieve entries where the key is 1 ...

Retrieve properties from an object that correspond to the class definition in Typescript

Hey there, I have an object structured like this: let o = {"foo":"blah", "blah": "foo", "foo2":"blah2"} In addition, my class is defined as follows: class Foo { constructor(public foo: string, blah: string) {} } I am curious if there is a way to insta ...

Is the Vue Carousel in CoreUI-Vue not functioning as expected?

I am currently using coreui-vue for my project, but I have encountered an issue with the carousel. The carousel does not start when the page loads, however, it starts to slide at intervals when I resize the screen while inspecting elements. What could be c ...

Seemingly the Tailwind Styles are failing to take effect in my Next.js Project

While following a Next.js tutorial project, I ran into an issue where my project seemed to be way off. It appeared that the tailwind styles were not being applied for some reason, even after tweaking the 'tailwind.config.js' file without success. ...

Obtaining the index of a modified array in vuejs using $watch

Currently, I am working with an array of objects: ({"code":"id1","color":"red","description":"eg1"}) Each object in the array contains input fields. Users have the ability to dynamically add and remove these objects. My goal is to automatically populate ...

Utilizing Vue.js to apply conditional statements or filters on v-for generated outputs

Currently, I am working on organizing my results by category. I believe there is room for improvement in the way it's being done: <div><h2>Gloves</h2></div> <div v-for="stash in stashes" :key="stash.id"> <div v-for= ...

What's causing the API's to return index.html code instead of their intended responses during production?

While in production, all the APIs are being fetched correctly, I am receiving an unexpected response of index.html file instead of JSON data. You can see that I'm getting index.html as a response while during development I used to receive JSON data fr ...

Utilize Electron to Connect with the Backend

Currently, I am working on developing a small desktop application utilizing electron and P5 for the front-end. My goal is to make sure that this application operates seamlessly offline by storing data locally instead of relying on a database. The challen ...

The texture fails to display upon loading the .dae model

I'm attempting to load a .dae model in three.js, but it seems like the texture is not loading. Here is my code snippet: <script src="js/three.js"></script> <script src="js/Animation.js"></script> <script src="js/An ...