What could be the reason for the undefined initial state in my vuex store?

I am facing an issue with vuex-typescript where the initial state is always undefined. However, it works fine when I reset the state and refresh the window. Below is my setup for a simple module:

import Vue from "vue";
import Vuex from "vuex";

import { module } from "./some_module";

let store = new Vuex.Store({
  modules: {
    module,

  },
  plugins: [persist({
    namespace: "mainnamespace",
    initialState: {
    },
    expires: 7 * 24 * 60 * 60 * 1e3 // 1 week
  })
  ]
});

some_module.ts

export interface State {
  something: any;
}

const state: State = {
  something: [],
};

export const module = {
namespaced: true,
  getters: {

    getSomethingArray: (state: State) => {

      return state.something;
    },

  },
  mutations: { 

    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  }
  actions: {///}
}

const { commit, read, dispatch } =
  getStoreAccessors<HistoryState, any>("somemodule");
const mutations = module.mutations;
const getters = module.getters;
const actions = module.actions;
export const getSomeStuffFromHere = read(getters.getSomethingArray);

When I run the app and

console.log(getSomethingArray(this.$store))
, I receive undefined. Upon inspecting this.$store, I can see the somemodule namespace but its state is not something: [] instead it shows some __ob__: Observer.

Answer №1

I encountered a strange issue but managed to solve it by introducing state:

export const module = {
namespaced: true,
state: state,
  getters: {

    getSomethingArray: (state: State) => {

      return state.something;
    },

  },
  mutations: { 

    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  }
  actions: {///}
}

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

How to integrate angular-ui-bootstrap with webpack

I'm attempting to integrate https://github.com/angular-ui/bootstrap with Webpack: import angular from 'angular'; import uiRouter from 'angular-ui-router'; import createComponent from './create.component'; import tabs fro ...

Employing JavaScript to display or conceal a <div> element while scrolling

I'm looking to create a customized sticky navigation bar through Javascript, but I have never written my own code in this language before. My approach involves implementing two sticky navigation bars that appear and disappear based on scrolling behav ...

What is the best way to transform a UTC/GMT date and time into CST in Javascript? (CST specifically, not based on

Dealing with a tricky situation where backend data is always stored in UTC time while our front-end data is in CST. Unfortunately, I don't have access to the system handling this 'black box' conversion. Trying to replicate this setup in our ...

Express not invoking Passport LocalStrategy

I added a console.log statement in the LocalStrategy callback of passport.js, but it never seemed to execute. I am using Sequelize for ORM with MySQL. passport.js const LocalStrategy = require('passport-local').Strategy const passport = require( ...

Is there a way to automatically fill in a MUI textfield in a React Hook form with data retrieved from Firestore?

Utilizing React Hook Forms alongside MUI TextField components has been a productive challenge for me. I've been able to successfully fetch data from Firestore and aim to prefill the form with this retrieved information. Although I am employing useFor ...

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

Exploring the Art of Navigation with Ionic and Angular

Trying to integrate Angular, Meteorjs, and Ionic Framework has been a smooth process, thanks to the urigo:angular and urigo:ionic packages. However, I'm facing difficulties in configuring ionic links and angular routing to make it work seamlessly. Des ...

Is there a way to send a Map object to a script file using EJS?

I am facing an issue with passing a Map object to my client-side code. I have successfully used EJS and JSON.stringify(...) in the past for arrays, but it doesn't seem to work for Maps. When I try to console.log(myMap.keys()), I receive the following ...

Destructuring part of an object within function parameters in JavaScript

Is it possible to selectively destructure specific object properties in function arguments, while keeping the rest accessible within the object? Let's explore this concept with a React example. (Although React is used here, the question pertains to J ...

Tips for managing lag caused by large raw image re-renders in a React application

When trying to change the background position of a user-uploaded background image that is in raw Data URI format using CSS, I noticed that re-rendering becomes slow if the image size exceeds 1mb. This issue does not occur with smaller images. Is there a ...

What is the best way to generate hyperlinks from data in a MongoDB database?

Looking for some assistance in setting up an online discussion forum using node.js, express & mongodb. My current challenge is creating clickable links that will redirect me to the specific page of each article stored in the database. I need to figure out ...

Extract the JSESSIONID and generate a new Cookie using AngularJS

Currently, I am utilizing a Web RESTful API from my client within AngularJS. app.controller('LoginController', [ '$http', '$cookies', function($http, $cookies) { this.credentials = {}; this.http = $ ...

Encrypting data using NodeJS Crypto and decrypting it in front-end JavaScript

I'm currently on the hunt for a way to perform AES256 CBC decryption on the client side. When working with nodeJS, I typically utilize this function for encryption: exports.encrypt = function(txt, cryptkey){ var cipher = crypto.createCipher(' ...

How can I position 7 images absolutely within a specific div?

I've been working on a website where users can have their avatars displayed using a JS function that loads 7 different images onto the page. These images correspond to different elements such as skin base, hair, eyes, mouth, shirt, shoes, and pants, a ...

``There is an issue with the onsubmit property that prevents the opening of

I have encountered an issue with my forms that has me stumped. Despite searching online for help, I can't seem to figure out why my implementation is not working as intended. The concept is straightforward. I've embedded a form within a JSP page ...

The system failed to locate the necessary dependency: * firebase within the file path ./src/firebase/firebase.js

Here are the dependencies specified in my package.json file: "dependencies": { "core-js": "^3.6.5", "firebase": "^9.0.0", "vue": "^3.0.0", "vue-router": "^4.0.11" ...

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

The addition of '?#' to the URL causes the page to be reloaded when Router.push is used

Upon clicking the sign-in button, this function activates and makes use of AWS Cognito: signIn() { let username = this.emailIn; let password = this.passwordIn; Auth.signIn(username, password) .then(user => { this.$router.push({ path: "d ...

Safeguard your Firebase database listeners against potential web DOS attacks and unauthorized access to sensitive credentials

Firebase is such a game-changer on mobile devices, but it's not always the best fit for web applications. This is common knowledge. I rely on firebase My users are aware of the database URL They can view certain aspects of the database that I'v ...