vuex-tstore
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Vuex TypeScript Store

    Vuex TStore is a low-overhead TypeScript wrapper around Vuex that can be used to trigger compilation errors and IntelliSense tips in Visual Studio Code.

    One of the problems with integrating Vuex with TypeScript is that it can be difficult to track payload types in Vuex. This class generates type-aware bindings to a wrapped Vuex store in order to expose typing information to the store consumer via a series of Generics which reference the configuration object. This means that this Store wrapper enables IntelliSense (VSCode), Linters, and the TypeScript Compiler to be able to validate that code is actually using the store correctly.

    How to install

    Installation is fairly straightforward:

    npm install --save vuex-tstore

    How to use

    Setting up the Vuex TStore is slightly more involved than you may be used to. In "vanilla" Vuex, type information will automatically propagate the state and context types into the function. In Vuex TStore, you'll need to define those types yourself:

    import Vue from "vue";
    import TStore from "vuex-tstore";
    import { ActionContext } from "vuex";
     
    // Not completely necessary, but will bind the vue.$tstore element to the TStore
    Vue.use(TStore);
     
    type State = {
      title: string
    };
    type Context = ActionContext<State, State>;
     
    // If you assign this to Vuex StoreOptions<State>, it will break your bindings.
    const options = {
      state: (): State => ({ title: "Hello, world!" }),
      getters: {
        title: (state: State) => state.title
      },
      mutations: {
        resetTitle: (state: State) => { state.title = ''; },
        setTitle: (state: State, payload: { title: string }) => { state.title = payload.title; }
      },
      actions: {
        resetTitle: async (context: Context) => context.commit('resetTitle'),
        setTitle: (context: Context, payload: { title: string }) => {
          setTimeout(() => context.commit('setTitle', payload), 1000);
        }
      }
    };
     
    const store = new TStore.Store(options);

    However, once configured, the TStore will automatically deduct the parameter and return types on getters, mutations, actions, and state objects.

    store.getters.title; // "Hello, world!"
    store.mutations.resetTitle(); // ""
    store.mutations.setTitle({ title: "foo" }); // "foo"
    store.actions.resetTitle();
    store.actions.setTitle({ title: "bar" });

    Project Typedef

    Since larger projects tend to be spread out more than what I was doing in the tests, you will probably need to overwrite the default project typedef values. This is the format I've used in other projects to get my IDE to recognize the store:

    import StoreRoot from 'path/to/my/store';
     
    declare module 'vue/types/vue' {
      interface Vue {
        $tstore: StoreRoot;
      }
    }

    Store Structure

    Object Description
    store.state Provides a type-aware proxy to the Vuex State.
    store.getters Provides a type-aware proxy to the Vuex Getters.
    store.mutations Contains a type-aware proxy to the Vuex Mutations. The TStore equivalent to store.commit("mutate", payload) is store.mutations.mutate(payload).
    store.actions Contains a type-aware proxy to the Vuex Actions. The TStore equivalent to store.dispatch("action", payload) is store.actions.action(payload).
    store.modules Contains the registered modules on the Vuex Store. For example, a getter called store.getters["foo/bar"] would now live under store.modules.foo.getters.bar.

    Event Listeners

    There are some new shorthand for registering event-handlers in this library.

    Mutation Listeners

    // call `unsub()` to remove the listener from the store.
    const unsub = store.mutations.setTitle.listen(({ title }) => { alert(title); });

    Action Listeners

    const unsub_1 = store.actions.setTitle.before(({ title }) => console.log(`Updating title to ${title}`));
    const unsub_2 = store.actions.setTitle.after(({ title }) => console.log(`Finished updating title to ${title}`));

    Install

    npm i vuex-tstore

    DownloadsWeekly Downloads

    161

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    170 kB

    Total Files

    37

    Last publish

    Collaborators

    • stevethedev