Retrieving data from Vuex store module within router.ts

Question

Retrieving data from Vuex store module within router.ts

I recently utilized a tutorial found here to establish a Vuex store with modules using TypeScript.

Here's what I have accomplished so far:

vuex/types.ts:

export interface RootState {
    version: string;
}

vuex/user-profile.ts:

import { ActionTree, Module, MutationTree } from 'vuex';
import { RootState } from './types';

interface User {
    firstName: string;
    uid: string;
}

interface ProfileState {
    user?: User;
    authed: boolean;
}

const state: ProfileState = {
    user: undefined,
    authed: false,
};

const namespaced: boolean = true;

export const UserProfile: Module<ProfileState, RootState> = {
    namespaced,
    state,
};

store.ts:

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { UserProfile } from '@/vuex/user-profile';
import { RootState } from '@/vuex/types';

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
  state: {
      version: '1.0.0',
  },
  modules: {
      UserProfile,
  },
};

export default new Vuex.Store<RootState>(store);

In my router.ts, I intended to access the authed state of the store in this manner:

import store from './store';
//...other imports...

const router = new Router({
//... route definitions...
});

router.beforeEach((to, from, next) => {
  const isAuthed = store.state.UserProfile.authed;
  if (to.name !== 'login' && !isAuthed) {
    next({ name: 'login' });
  } else {
    next();
  }
});

The code functions correctly (the app redirects as expected), HOWEVER, I am encountering compiler errors stating that

Property 'UserProfile' does not exist on type 'RootState'

. This error seems logical since it's not defined explicitly, but shouldn't it search within the modules too, or did I define the module improperly?

typescript vue.js vuex vue-router vuex-modules

Answer 1

Answer №1

To ensure proper definition of all stores in the RootState interface, follow this format:

export default interface RootState {
  version: string,
  UserProfile: any
}

You can also import the interface from the UserProfile and use it instead of using 'any'. This approach is recommended especially if your file naming convention does not follow pascal casing.

This setup instructs rootState to anticipate a vuex store named UserProfile with either any type or UserProfile interface.

In my case, the rootstate interface for vuex store looks like this:

export default interface RootState {
  version: string,
  config: any,
  cart: any,
  checkout: any,
  cms: any,
  product: any,
  shipping: any,
  user: any,
  wishlist: any,
  attribute: any,
  ui: any,
  newsletter: any,
  category: {
    current_path: string,
    current_product_query: any,
    current: {
      slug: string,
      name: string
    },
    filters: any
  }
}

Answer 2

To ensure proper definition of all stores in the RootState interface, follow this format:

export default interface RootState {
  version: string,
  UserProfile: any
}

You can also import the interface from the UserProfile and use it instead of using 'any'. This approach is recommended especially if your file naming convention does not follow pascal casing.

This setup instructs rootState to anticipate a vuex store named UserProfile with either any type or UserProfile interface.

In my case, the rootstate interface for vuex store looks like this:

export default interface RootState {
  version: string,
  config: any,
  cart: any,
  checkout: any,
  cms: any,
  product: any,
  shipping: any,
  user: any,
  wishlist: any,
  attribute: any,
  ui: any,
  newsletter: any,
  category: {
    current_path: string,
    current_product_query: any,
    current: {
      slug: string,
      name: string
    },
    filters: any
  }
}

Answer 3

Answer №2

UPDATE: The issue appears to stem from direct access to the state. Line

const isAuthenticated = store.state.UserProfile.authed;

My belief is that this is happening due to it being namespaced. To solve this, consider creating a getter.

const getters: GetterTree<ProfileState, RootState> = {

    user(state): User {
        return state.user
    }

};

You can then access it like

store.getters['UserProfile/user']

Furthermore, I recommend using getters when accessing your state data. Check out Getters for more information.

Answer 4

UPDATE: The issue appears to stem from direct access to the state. Line

const isAuthenticated = store.state.UserProfile.authed;

My belief is that this is happening due to it being namespaced. To solve this, consider creating a getter.

const getters: GetterTree<ProfileState, RootState> = {

    user(state): User {
        return state.user
    }

};

You can then access it like

store.getters['UserProfile/user']

Furthermore, I recommend using getters when accessing your state data. Check out Getters for more information.

Answer 5

Answer №3

1

     const isLoggedIn = store.state["UserProfile"].authed; // false

2

    const currentState:any|State = store.state
    const isLoggedIn = currentState.UserProfile.authed; // false

3

    const isLoggedIn = (<any|State>store.state).UserProfile.authed; // false

Answer 6

1

     const isLoggedIn = store.state["UserProfile"].authed; // false

2

    const currentState:any|State = store.state
    const isLoggedIn = currentState.UserProfile.authed; // false

3

    const isLoggedIn = (<any|State>store.state).UserProfile.authed; // false

Answer 7

Answer №4

Here is a functional solution with dependencies

"vuex": "^4.0.2"

,

"vue-router": "^4.0.10"

and

"vue": "^3.1.4"

.

To access your state in the module, import the store into your router file:

import store from "@/store/store";

In this example, I have a module named authModule where I can retrieve the token stored as a JWT:

let loggedIn = store.state.authModule.token;

Answer 8

Here is a functional solution with dependencies

"vuex": "^4.0.2"

,

"vue-router": "^4.0.10"

and

"vue": "^3.1.4"

.

To access your state in the module, import the store into your router file:

import store from "@/store/store";

In this example, I have a module named authModule where I can retrieve the token stored as a JWT:

let loggedIn = store.state.authModule.token;

Answer 9

Answer №5

To achieve the desired result, I suggest using a double cast method. One for general access and one specifically for accessing your intended data. It's important to note that in the code snippet from the last router.ts file, the variable "store" represents an instance of the Store, while the other imports are simply type definitions.

For the sake of brevity, I have omitted the detailed code related to namespaced, state, getters, actions, and mutations as they are essentially object structures.

Within store/myModule/types.ts:

export default interface State {
    testValue
}

In store/myModule/index.ts:

import RootState from '../types'

const module: Module<State, RootState> = {
    namespaced,
    state,
    getters,
    actions,
    mutations,
}

export default module

Defined in store/types.ts:

interface RootState {
  myOtherTestValue: string
}

export default RootState
export { RootState }

Inside store/index.ts:

import RootState from './types'
import myModule from './myModule'

export const cmStore: StoreOptions<RootState> = {
    actions,
    mutations,
    state,
    modules: {
        myModule,
    },
    plugins,

}

export default new Vuex.Store<RootState>(cmStore)

Implemented in router.ts:

import store from './store'
import RootState from './store/types'
import MyModuleState from './store/myModule/types'

// To properly access the desired data:
const myState = ((store.state as any).myModule as MyModuleState)

console.log(myState.testValue)

Answer 10

To achieve the desired result, I suggest using a double cast method. One for general access and one specifically for accessing your intended data. It's important to note that in the code snippet from the last router.ts file, the variable "store" represents an instance of the Store, while the other imports are simply type definitions.

For the sake of brevity, I have omitted the detailed code related to namespaced, state, getters, actions, and mutations as they are essentially object structures.

Within store/myModule/types.ts:

export default interface State {
    testValue
}

In store/myModule/index.ts:

import RootState from '../types'

const module: Module<State, RootState> = {
    namespaced,
    state,
    getters,
    actions,
    mutations,
}

export default module

Defined in store/types.ts:

interface RootState {
  myOtherTestValue: string
}

export default RootState
export { RootState }

Inside store/index.ts:

import RootState from './types'
import myModule from './myModule'

export const cmStore: StoreOptions<RootState> = {
    actions,
    mutations,
    state,
    modules: {
        myModule,
    },
    plugins,

}

export default new Vuex.Store<RootState>(cmStore)

Implemented in router.ts:

import store from './store'
import RootState from './store/types'
import MyModuleState from './store/myModule/types'

// To properly access the desired data:
const myState = ((store.state as any).myModule as MyModuleState)

console.log(myState.testValue)

Retrieving data from Vuex store module within router.ts

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Leverage asyncData method in your NuxtJS layout or component

Sending the response data from an API call to a Vue object

What is the method for retrieving data from the root component within a child template in VueJs?

Mastering universal code creation with the composition API in Quasar

How can I create an inline form in Vue using Element UI with a select dropdown and submit button?

Using requestAnimationFrame and event listeners for keyup and keydown events in TypeScript

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

The VueJS dynamic grid view

Check to see if the event handler is triggered and the promises are executed in sequence (syncronously)

VueJS/Vuetify - button fails to toggle when v-if statement is satisfied

Restricting a Blob to a particular data type

What is the correct way to define the onClick event in a React component?

IntellJ Editor encounters Typescript error

Vue.js: Resolving the "Unknown Custom Element" Issue with Hot Module Replacement

Switch the Follow/Following button depending on the user's current follow status with the individual

The data does not have a property named 'formData' according to the type 'Event'

What is the best way to exceed the capacity of a function in TypeScript by incorporating optional

What is the method for retrieving the marker's position in vue2-google-map after it has been dragged

How to Implement a Pop-up Modal in Angular Using TypeScript

Encountered a React TypeScript issue stating that the type '{ ... }' cannot be assigned to the type 'IntrinsicAttributes & IntrinsicClassAttributes<...>'