I am currently integrating vuex with typescript and namespaces module in my project. Within this setup, I have two distinct modules: "UserProfile" and "Trips". So far, everything is functioning smoothly within the confines of each module.
However, I have encountered an issue where I need to access the current user data, stored within the state of the "UserProfile" module, from an action within the "Trip" module.
My understanding suggests that I could simply use rootState["profile/user"] if I were not using typescript.
Nevertheless, when working with typescript, the compiler presents me with an error message like the following:
Element implicitly has an 'any' type because type 'RootState' has no index signature.
Here is a snippet of the problematic action within the "Trip" module:
async createTrip({ commit, state, rootState, rootGetters}) {
const user = rootState["profile/user"];
}
If anyone knows the correct method to access a state belonging to another namespaced module while utilizing vuex + typescript, your help would be greatly appreciated.
Thank you.
===== UPDATE =====
After some experimentation, I have come across a workaround that seems to be effective:
1] For each module, creating a getter that returns its entire state (for example, the "Profile" module includes a getter for the ProfileState type).
2] Utilizing this getter through rootGetters from another module as demonstrated below:
async createTrip({ commit, state, rootState, rootGetters}) {
const profileState: ProfileState= rootGetters["profile/getState"];
if(profileState.user === undefined ) return;
console.log("CurrentUser: " + profileState.user.uid);
}