Here is how the store initialization process is currently being implemented:
/* Logic */
import Vue from 'vue'
import Vuex, { StoreOptions } from 'vuex'
Vue.use(Vuex)
const DataManager = new UserDataManager()
type RootStateType = {
version: string
}
const store: StoreOptions<RootStateType> = {
// @ts-ignore
state: {
version: '1.0.0'
},
modules: {...},
plugins: [DataManager.init()]
}
export default new Vuex.Store<RootStateType>(store)
Now, let's talk about the plugin implementation:
export class UserDataManager {
... some logic here
public init () {
return (store: <TYPE?>) => {
store.watch(
(state: RootStateType) => {
return [state.user.authentication.id]
},
(watched: string[]) => {
const userID = watched[0]
... more logic
}
)
}
}
}
I'm facing a bit of confusion regarding passing the correct type in this scenario. I attempted to pass it using:
type storeType = StoreOptions<RootStateType>
...
return (store: storeType) => {
...
However, this resulted in the following error message:
TS2339: Property 'watch' does not exist on type 'StoreOptions<RootStateType>'