Having trouble with Vuex in Vue JS when trying to set up a modular store

Currently, I am in the process of building a web application using Vue along with Vuex. Despite being new to Vue, I am attempting to integrate Vuex into my Vue application. However, I am encountering an issue when using modularised Vuex.

In my project, there is a store file named PersonalInfoFormStore.js

export default {
    namespaced : true,
    state : {
        name : 'this is my name'
    }
}

Within the app.js file, I have set up the Vuex store as follows

import Vuex from 'vuex';

import PersonalInfoFormStore from './PersonalInfoFormStore';

//other imports


Vue.component("application-form", require('./components/PersonalInfoForm.vue'));

Vue.use(Vuex);

const store = new Vuex.Store({
    modules : {
        PersonalInfoFormStore
    }
});

const app = new Vue({
    el: '#app',
    //additional code
    store: store
});

Subsequently, in PersonalInfoForm.vue, I tried to access the state value using the following code

mounted() {
        alert(this.$store.PersonalInfoFormStore.state.name)
        //alert(this.$store.getters.count)
    }

Unfortunately, upon checking the console, I encountered the following error

app.js:664 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'state' of undefined"

found in

I am seeking guidance on resolving this issue. When I have all the data in a single store without modularisation, everything works perfectly fine. However, my preference is to use a modularised store for better organisation and scalability.

Answer №1

console.log(this.$store.UserDetailsFormStore.state.username)

becomes

console.log(this.$store.state.UserDetailsFormStore.username)

Answer №2

In my opinion, the correct syntax should be

this.$store.state.PersonalInfoFormStore.name

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

Building a React component that's a table containing rows that can be scrolled and elements that are clickable

Imagine having a set of events and their respective participants: const myData = { "event_1": ["1", "2","3"], "event_2": ["11", "5","8", "9"], "event_3&quo ...

Struggling with a Bootstrap v5.0.2 Modal glitch? Let's dive into a real-life case study to troub

I am seeking assistance with a problem that I am encountering. I am currently using Bootstrap version 5.0.2 (js and css). Despite coding all the required parameters, I am unable to make the modal functionality work. I have been trying to figure out what&ap ...

Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are work ...

Switch between showing excerpts and full content using Ajax Load More

Currently experimenting with the Infinite Scroll plugin, my goal is to display only excerpts initially, with the option to load the full content upon user click. The PHP code snippet: <div class="tenant"> <li<?php if (! has_post_thumbnail() ) ...

Executing JavaScript code upon successful form submission: An overview

I need help with my Asp.Net MVC web application. I am trying to implement a feature where some code runs on the successful response of an API method called upon form submission. Here is the current code snippet: @using (Html.BeginForm("APIMethod", "Confi ...

Tips for improving the performance of MongoDB queries in a Node.js environment

I am currently facing an issue with my code running in nodejs where I need to call a MongoDB query with aggregation properties using callbacks. However, the code is not functioning as expected. I want the code to run asynchronously so that once the MongoDB ...

Node.js Timer Functionality for Precision Timing

I'm currently in the process of developing a live chess application and one feature I'm looking to incorporate is a timer. The challenge I'm facing lies in ensuring the timer is accurate. After conducting various tests, I discovered that bot ...

It is not possible to access fields in Firestore using Node.js

Exploring the limits of my Firestore database access with a test function: exports.testfunction = functions.https.onRequest(async (request, response) => { try{ const docRef = firestore.collection("Stocks").doc("Automobile" ...

Upgrade your project from Angular 5 to Angular 9 using webpack

I want to share my experience, not ask a question! To upgrade dependencies in package.json: -Update all Angular dependencies to version 9 -Add these dependencies: "@angular-devkit/build-angular": "^0.900.4", "@angular-builders/cu ...

How to insert an image into a toolbar within a Vue + Vuetify SFC

I'm currently adapting code from the repository found at the following link for a personal project: https://github.com/aws-samples/aws-ai-qna-bot.git Issue: My goal is to include a logo in the center of the toolbar between the app drawer and logout b ...

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

What are the steps to achieve complete test coverage for my Angular login form? Encountering an issue with reading property 'subscribe' of undefined

Recently, I made adjustments to my login component to align more closely with Angular standards. However, upon testing, I encountered errors of this kind: Cannot read property 'subscribe' of undefined After using console.log for debugging pur ...

Prevent identical values from being added repeatedly to a table while updating in real-time

Currently, I am facing an issue while running through a loop to extract values from an array. When I add a second value, it duplicates both the new and previous values in the table. For example, adding a row with value 488 works fine: <tr class="exe"& ...

The Angular datepicker is failing to trigger the ng-change event

I've run into a snag with the datepicker and ng-change functionality. Oddly enough, the ng-change event isn't triggering when I manually select a date by clicking on it, but it works fine when I input a date manually. Take a look at my code snip ...

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

What is the correlation between statistics and posts that are generated dynamically?

One interesting aspect to consider is how statistics are connected to individual posts. For instance, linking the like count to each Facebook post or tying upvote and downvote stats to a question on Stackoverflow presents some intriguing challenges. How ...

"Use jQuery to target the first child element within a parent element that has a specific class

Is there a way to choose only the first child of a specific parent class with a certain class for the purpose of clone()? <div class="sector_order"> <div class="line_item_wrapper"> SELECT THIS DIV </div> <div class=" ...

Positioning Images in Tailwind Modals

I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired. I've experimented with removing certain Tailwind classes and have tried implementing ...

What is the most efficient way to handle dependencies and instantiate objects just once in JavaScript?

I am interested in discovering reliable and tested design patterns in Javascript that ensure the loading of dependencies only once, as well as instantiating an object only once within the DOM. Specifically, I have the following scenario: // Block A in th ...

Validating image dimensions with the data-parsley plugin

Is there a way to validate image dimensions with data-parsley? I attempted the code below, but it is not working. data-parsley-dimensions-options='{ "min_width": "100", "max_width": "100", "m ...