istrib / vuex-typescript Goto Github PK

Hi,

sorry for the beginner question, I am trying to do a migration for a project. As first step I would like to have this.$store treated as any.

Is there a way to specify this for all components?

thank you for your time and happy holidays

What Licence does the project use? Is there any copyright?

I could not find any information on the licence in the readme or in the code.

I followed you example (withModules) and app is not working at all in IE and Safari. I am getting error:
Vuex handler functions must not be anonymous. Vuex needs a key by which it identifies a handler. If you define handler as class member you must decorate it with @Handler.

Now my code is this (some of it):

export const search_ = {
namespaced: true,
  getters: {
    searchedAddress: (state: State) => {
      return state.searchedAddress;
    }
  },
  mutations: {
    searchingFor (state: State, address: Address) {
      state.searchedAddress = address;
    },
    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  }
}

const { commit, read, dispatch } =
  getStoreAccessors<State, any>("search_");
const getters = search_.getters;
export const getSearchedAddress = read(getters.searchedAddress);

When i console log your stuff in this function:

function qualifyKey(handler, namespace) {
  console.log(namespace)
  console.log(handler)
  console.log(handler.name)
  console.log(handler._vuexKey)
    var key = handler.name || handler._vuexKey;
    if (!key) {
        throw new Error("Vuex handler functions must not be anonymous. "
            + "Vuex needs a key by which it identifies a handler. "
            + "If you define handler as class member you must decorate it with @Handler.");
    }
    return namespace
        ? namespace + "/" + key
        : key;
}

I am getting in IE and Safari for Windows:

1. search_ // this is namespace
2. function as string // this is ahndler
3. undefined // this is handler name (but should be mutation name)
4. undefined // this is handler._vuexKey

I would really appreciate if you can help with this because this is a project that i have been working on for three months and going back to old style vuex is just not and option for me at this momment.

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)
  }
}

Hi, I'm migrating my project from [email protected] to [email protected] and meanwhile I upgrade vuex from 2.7.1 to 3.0.0. But this repo is depending on 2.3.1. So can you upgrade it? I think most people using this repo need this.

Is there a way to access the store functions ive set up in router guard methods, they all work fine inside modules themselves but i cant seem to get them working outside of those.

Is there any way I can use this vuex-typescript in modules like vue-router, where I do not have access to this.$store? My use case is such that I am checking if user is authenticated by using getter from vuex in beforeEach hook in vue-router

It showed an error "Vuex handler functions must not be anonymous."
If I don't minify the script, it works fine. Other modern browser did work with minified script.

From an action in one module I want to call a getter in another module. I'm able to do it with context.rootGetters["namespace/getter"] but it doesn't feel like the typescript way to do it. Trying to call the read static function I can't figure out how to get the right ActionContext to pass into the getter.

In Chromium 30 (which is the version of the Android 4.2.2 WebView) Function.name is not spec complaint, and vuex-typescript relies on it being so. More specifically (function () { var x = function () { }; return x.name; })() should return "x", but in Chromium 30 returns "" since it is an anonymous function. For this situation I found using classes with the Hander decorator is absolutely necessary.

Since Function.name is an es2015 feature https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname, and some vuex-typescript users will be targeting mobiles, it would be helpful documenting this use case; perhaps in the readme.

Im not clear on the intent of the target parameter and how i would use that so i can leverage the key parameter

export declare function Handler(target: any, key: string): void;

 @Handler( ??? , 'dispatchIncrementCounter')
    private _dispatchIncrementCounter(context: MarketContext): void {
        context.commit('incrementCounter');
    }


//store
    public market = {
        namespaced: true,
        ...
        actions: {
            dispatchIncrementCounter: this._dispatchIncrementCounter,
      }
    }

I have also noticed that when using @handler the context of this for a class is no longer valid. How can i get the class reference for using injected services from the constructor?

 constructor( @inject(INJECTION_TYPES.ProductService) private _productService: IProductService) {
        super();
    }
...

@Handler
    private async dispatchFindProductsByCategory(context: MarketContext, payload: { category: string }): Promise<void> {
        let d = await this._productService.getAsync();
}

  market = {
        namespaced: true, // this is required 
        state: this._initialMarketState,
        actions: {
            dispatchFindProductsByCategory: this.dispatchFindProductsByCategory
        }
    }

  findProductsByCategoryAsync = async (payload: { category: string }): Promise<void> => {
        return await dispatch(this.market.actions.dispatchFindProductsByCategory)(this.store, payload);
    };

this._productService is UNDEFINED

Any insight would be great

I've been trying out this approach but ran into an issue with specifying a vuex getter with more than just the state; i.e. (state, getters, rootState, rootGetters).

Shouldn't the following be GetterHandler<state: TModuleState, getters: any, rootState: TRootState, rootGetters: any) instead? I just started using Typescript so I don't know if I'm missing something.
https://github.com/istrib/vuex-typescript/blob/master/src/index.ts#L12

Hi,
If i set a property with readProductNames values and then commitAppendItem, the property won't update.
If i call again readProductNames it will show the correct data, but i was expecting for a getter to be always updated according to the state.

Help please,

Thanks,
Tatiana.

Using vuex-typescript and getting inital state undefined all the time. Once i reset state it is working but only when i reset and window refresh. Here is my setup for some simple module:

import Vue from "vue";
import Vuex from "vuex";

import { module } from "./some_module";

let store = new Vuex.Store({
  modules: {
    module,

  },
  plugins: [persist({
    namespace: "mainnamespace",
    initialState: {
    },
    expires: 7 * 24 * 60 * 60 * 1e3 // 1 week
  })
  ]
});

some_module.ts

export interface State {
  something: any;
}

const state: State = {
  something: [],
};

export const module = {
namespaced: true,
  getters: {

    getSomethingArray: (state: State) => {

      return state.something;
    },

  },
  mutations: { 

    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  }
  actions: {///}
}

const { commit, read, dispatch } =
  getStoreAccessors<HistoryState, any>("somemodule");
const mutations = module.mutations;
const getters = module.getters;
const actions = module.actions;
export const getSomeStuffFromHere = read(getters.getSomethingArray);

when i run app and console.log(getSomethingArray(this.$store)) i got undefined and when i console.log(this.$store) i can see somemodule nemespace but its state is not something: [] but some __ob__: Observer

This happens completely random. In some modules it does not happen at all and there is no difference in them except state object.

Find a simple example here: https://github.com/BertusVanZyl/vuex-typescript-problemdemo

I got vuex-typescript working, and the state is changing. However, in the vue dev tools, no vuex events are created when using vuex-typescript.

Using the classic vuex works properly in vue dev tools.

I am probably doing something wrong, but I am not sure exactly what.

Given an action wit optional parameter:
async testIt(context: TestContext, payload?: number): Promise<void> {}

Is mapped with:
export const testAction = dispatch(test.actions.testIt)

When you call the action inside a VUE Component with the optional parameter:
test.testAction(this.$store, 123)

You will get a compile error:
Expected 1 arguments, but got 2.

I am building an electron app using vue, vuex and vuex-typescript. I have been following this example: https://github.com/DevoidCoding/TodoMVC-Vue-TypeScript/tree/master/vuex-typescript
So I have the following code for my store using vuex-typescript:

export const dispaVuex = {
  namespaced: true,

  state: {
    dispatch: new Dispatcher(appState),
  },

  getters: {
    getFTime(state: DispatchState): boolean {
      return state.dispatch.fistTime;
    },
  },
};

const {read} = getStoreAccessors<DispatchState, RootState>("Test");

export const readFtime = read(dispaVuex.getters.getFTime);

After adding the store to my vue instance I try and access the firstTime variable in my App.vue like this:

@Component
export default class App extends Vue {
  get fTime(): boolean {
    return readFtime(this.$store);
  }
}

When looking at the debugger, everything in the store is initialized perfectly but my App instance has fTime as undefined.

Why would this be the case? Is there something I am not getting about the order of how things are made?

PS. firstTime is a member of the class Dispatcher