Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getters always returning undefined where state is valid #23

Open
PHILLIPS71 opened this issue Feb 19, 2020 · 1 comment
Open

Getters always returning undefined where state is valid #23

PHILLIPS71 opened this issue Feb 19, 2020 · 1 comment

Comments

@PHILLIPS71
Copy link

Stumbled across this lib through this article https://medium.com/js-dojo/using-fully-typed-vuex-mutations-with-vuex-typescript-7597f56eceec. All is working well but getters are always returning undefined when using dot notation to get into the state.

If i parse in my UserStoreState object into the getter there is data but it is the entire user state, as soon as I try to only access the user object within the state I get undefined even though there is data within it. Unsure if this is because namespacing is false

Vuex Store

import Vue from 'vue'
import Vuex, { Store } from 'vuex'
import UserStore from '@/vuex/user'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

const store: Store<any> = new Vuex.Store({
  modules: {
    user: UserStore,
  },
  strict: debug,
})

Vue.prototype.$store = store
export default store

User Store Module

import { UserStoreState } from '@/vuex/module/UserStoreState'
import { User } from '@/model/user/User'

export const UserStoreModule = {
  namespaced: false,
  state: new UserStoreState(),
  mutations: {
    setUser (state: any, user: User): void {
      state.user = user
    },
  },
  getters: {
    user: (state: UserStoreState): User => {
      return state.user
    },
  },
}

UserStore

import BaseStoreService from '@/vuex/util/BaseStoreService'
import { UserStoreState } from '@/vuex/module/UserStoreState'
import { UserStoreModule } from '@/vuex/module/UserStoreModule'
import { User } from '@/model/user/User'

class UserStore extends BaseStoreService<UserStoreState> {
  public mutations = UserStoreModule.mutations
  public getters = UserStoreModule.getters

  setUser (user: User) {
    this.commit<User>(this.mutations.setUser, user)
  }

  getUser (): User {
    return this.read<User>(this.getters.user)
  }
}

export default new UserStore()

BaseStoreService

import { getStoreAccessors, GetterHandler, MutationHandlerWithPayload } from 'vuex-typescript'
import store from '@/plugins/vuex'
import { RootState } from '@/vuex/state'

export default abstract class BaseStoreService<T> {
  protected api = getStoreAccessors<T, RootState>('');

  protected commit<TPayload> (handler: (MutationHandlerWithPayload<T, TPayload>), payload: TPayload) {
    this.api.commit(handler)(store, payload)
  }

  protected read<TResult> (handler: GetterHandler<T, RootState, TResult>): TResult {
    return this.api.read<TResult>(handler)(store)
  }
}

tempsnip

@khenissimehdi
Copy link

did u solve this ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants