CODEWITHSUNDEEP
javascripttypescriptvue.jsvuex
Alexander Kim
Alexander Kim

Reputation: 18382

Vuex - store state Object is of type unknown

/src/middlewares/auth.ts file:

import store from '@/store'

export default {
  guest(): void {
    if (store.state.auth.authenticated === false) {
      // do some action
    }
  }
}

/src/store.ts file:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

/src/store/auth.ts:

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module
export default class Auth extends VuexModule {
  public authenticated: boolean = false
}

However i'm getting TS error: Object is of type 'unknown'

Then my npm run build fails. How can i type store so this error would disappear?

UPDATE 1

Problems is in line: if (store.state.auth.authenticated === false)

enter image description here

UPDATE 2

My directory structure for these 3 files:

UPDATE 3

if i change store.state.auth.authenticated to store.state then compiler stops complaining, i think its related to my store auth.ts file, i need to type definition it somehow.

Upvotes: 11

Views: 3411

Answers (2)

Taha Abdelmoneim
Taha Abdelmoneim

Reputation: 1

It's hard to tell where store comes from in your scenario that you posted. If you are importing it directly then it would be something along the lines of:

import store from "store/index";

Also, by the nature of the store it's not fully typed. You could type it with something like

if ((store as object).state?.auth?.isLogged) {}

Though this won't give you type safety it would tell the compiler that you don't know.

Upvotes: 0

Hadar Eliyahu
Hadar Eliyahu

Reputation: 11

Take a look: logrocket

export default function auth ({ next, store }){
 if(!store.getters.auth.loggedIn){
     return next({
        name: 'login'
     })
 }

 return next()
}

Your first argument sohuld be an object defining { store }

export default guest ({ store }, to: any ...){

Upvotes: 1

Related Questions