Webstorm can't resolve Vuex modules in getter format

Running Webstorm 2020.3.3 on Ubuntu LTS 20.04.

 

I've got a Vite + Vue3 project (without Typescript), and in it we're using Vuex `4.0.0`. We're splitting our store into namespaced modules, but WebStorm doesn't seem like it's able to pickup on the namespaces when they're defined in the `...mapGetters({})` syntax.

 

My `store/index.js` file:

import "es6-promise";
import { createStore, createLogger } from "vuex";

import users from "./modules/users";

export const store = createStore({
modules: {
users
},
strict: import.meta.env.DEV,
plugins: import.meta.env.DEV ? [createLogger()] : []
});

 

The `users` module we're importing:

const state = () => ({
loggedIn: false,
});

const getters = {
loggedIn: (state) => {
return state.loggedIn;
}
};

export default {
namespaced: true,
state,
getters
};

 

And in one of my components I'm trying to call the `users/loggedIn` getter:

import { mapGetters } from "vuex";

export default {
computed: {
...mapGetters({
loggedIn: "users/loggedIn"
})
}
};

 

However, WebStorm is giving me weak warnings on the `"users/loggedIn"` part, saying that it's an `Unknown Vuex module namespace users`. The store itself functions fine, the getter works and my store info shows up on the component, but some components have 20 or 30 of these getters and seeing 60 weak warnings in those components is kind of irritating.

 

If I go with the `this.$store.state.users.loggedIn` syntax, there's no weak warnings, but I'd rather not go with that. Any solution here?

 

On a side note, why on earth doesn't this site support Markdown?

1 comment
Comment actions Permalink

Basic support for Vuex 4 is planned for 2021.1, see https://youtrack.jetbrains.com/issue/WEB-49157 and linked tickets

Please check if it works any better for you in the EAP build.

0

Please sign in to leave a comment.