I'm completely new to working with vuex and I'm facing some challenges in getting it set up properly. Here is the current structure of my store folder:
- store
- module-example
- index.ts
- mutations.ts
- getters.ts
- state.ts
- index.ts
- store-flag.d.ts
The file contents are as follows:
index.ts
import { store } from 'quasar/wrappers';
import Vuex from 'vuex';
import example from './module-example';
export interface StateInterface {
example: unknown;
}
export default store(function ({ Vue }) {
Vue.use(Vuex);
const Store = new Vuex.Store<StateInterface>({
modules: {
example
},
strict: !!process.env.DEBUGGING
});
if (process.env.DEV && module.hot) {
module.hot.accept(['./showcase'], () => {
const newShowcase = require('./showcase').default
Store.hotUpdate({ modules: { showcase: newShowcase } })
})
}
return Store;
});
store-flag.d.ts
/* eslint-disable */
import "quasar/dist/types/feature-flag";
declare module "quasar/dist/types/feature-flag" {
interface QuasarFeatureFlags {
store: true;
}
}
index.ts
import { Module } from 'vuex';
import { StateInterface } from '../index';
import state, { ExampleStateInterface } from './state';
import getters from './getters';
import mutations from './mutations';
const exampleModule: Module<ExampleStateInterface, StateInterface> = {
namespaced: true,
getters,
mutations,
state
};
export default exampleModule;
mutations.ts
import { MutationTree } from 'vuex';
import state, { ExampleStateInterface } from './state';
const mutation: MutationTree<ExampleStateInterface> = {
someMutation (state: ExampleStateInterface, token: ExampleStateInterface) {
state = token
}
};
export default mutation;
getters.ts
import { GetterTree } from 'vuex';
import { StateInterface } from '../index';
import { ExampleStateInterface } from './state';
const getters: GetterTree<ExampleStateInterface, StateInterface> = {
getToken (state: ExampleStateInterface): string {
return state.token
},
getUserName (state: ExampleStateInterface): string {
return state.username
},
getRetrievalTime (state: ExampleStateInterface): Date {
return state.retrievalTime
}
};
export default getters;
state.ts
export interface ExampleStateInterface {
token: string;
username: string;
retrievalTime: Date;
}
function state(): ExampleStateInterface {
return { token:'dddddd', username: 'ddd', retrievalTime: new Date() }
};
export default state;
Currently, I'm able to access the state using the following code:
console.log(this.$store.state.example.retrievalTime)
But, I'm encountering an error because the type is set to any. Additionally, I'm facing issues with performing mutations. I have tried the following code but it doesn't seem to have any effect:
this.$store.commit('example/someMutation', { token:'new', username: 'new', retrievalTime: new Date() })
I've searched online for examples specifically related to quasar in typescript, but I haven't found anything that works. Any help or suggestions would be greatly appreciated.