Vuex - store state Object is of type unknown

Question

/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)

UPDATE 2

My directory structure for these 3 files:

• /src/middlewares/auth.ts
• /src/store.ts
• /src/store/auth.ts

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.

Apatite

Can you provide more context and indicate the line of the error? There is not enough code to reproduce the error. – Tallyho

@Tallyho updated my question. – Apatite

What does your directory / file structure look like, at least for these two files? – Umbelliferous

@Phil, updated post, how it can be related to a paths? Running locally - it shows these errors, but it works, i cannot build for production, due these errors. – Apatite

Just wanted to make sure you didn't have a store directory or store.js file that might be getting loaded in place of store.ts – Umbelliferous

This might help ~ codeburst.io/vuex-and-typescript-3427ba78cfa8 – Umbelliferous

@Phil, i'm using vuex-module-decorators. – Apatite

You are not importing the auth module – Libau

@roliroli I would have assumed that would throw a totally different error in the store.ts file but you're right, it is suspiciously missing from the code above – Umbelliferous

Humour me and change your import to import store from '@/store.ts'. It's best to not make your build system guess between src/store.ts (the file) and src/store (the directory) – Umbelliferous

I came across exactly the same issue after installing my dependencies from scratch. I solved it by declaring 'state' as type 'any': import store from '@/store.ts' ... const state = store.state as any;. I wouldn't go so far as calling this a clean solution, but at least my code compiles now. – Mayman

Answer 1

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 ...){

Brunhilda

Answer 2

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.

Dissidence