Wondering what’s next for npm?Check out our public roadmap! »

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

    1.1.1 • Public • Published

    Vuex-Functional

    Codacy Badge CodeFactor Snyk

    This TypeScript library provides a set of functions that reveal the committers, dispatchers, getters, state, and modules of Vuex stores in the Vue-Composition API. The goal of this project is to provide TypeScript hinting with low-overhead and zero configuration.

    Browser Support

    This library should work in any browser that supports ES6. It does, however, use JavaScript Proxies — IE11 is not supported, and there are no plans to support it in the future.

    Installation

    npm i vuex-functional

    Usage

    This section explains how to extract content from the store. For the following examples, this is the store file:

    const storeState = {
      string: "string",
      number: 1
    };
    
    export const options = {
      state: () => ({ ...storeState }),
      getters: {
        get_string: (state: typeof storeState) => state.string,
        get_number: (state: typeof storeState) => state.number
      },
      mutations: {
        SET_STRING: (state: typeof storeState, payload: { string: string }) =>
          (state.string = payload.string),
        SET_NUMBER: (state: typeof storeState, payload: { number: number }) =>
          (state.number = payload.number),
        NO_PARAM: () => void 0
      },
      actions: {
        action_payload: async (ctx, payload: { string: string }) => {
          ctx.commit("SET_STRING", payload);
        },
        no_payload: async () => true
      },
      modules: {
        bar: {
          namespaced: true,
          state: { bar: "bar", number: 1 },
          mutations: {
            BAR_SET_STRING(this: VStore<any>, state, payload: string) {
              state.bar = payload;
              commits<typeof options>(this).SET_STRING({
                string: payload
              });
            }
          }
        }
      }
    };

    Get the Store object

    Before the Store object can be retrieved, it must first be injected into the Vue application:

    import { createApp } from "vue"
    import { createStore } from "vuex";
    
    import { options } from "path/to/my/store";
    import App from "path/to/App.vue";
    
    createApp(App).use(createStore(options)).mount("#app");

    Previous versions of this library supported Vue.extend and the Vue 2.0-compatible Composition API. They are no longer supported.

    import { defineComponent } from "vue";
    import { getters, store } from "vuex-functional";
    import { options } from "path/to/my/store"; //< The options used to create the store
    
    export default defineComponent({
      setup: (_, ctx) => {
        // Extracts the store
        const $store = store<typeof options>(ctx);
    
        //
        // Your code goes here
        //
      }
    });

    Store state and getters

    State and getters behave exactly the same way they would if you were to access them directly.

    import { getters, state, store } from "vuex-functional";
    import { options } from "path/to/my/store";
    
    // ...
    
    const $store = store<typeof options>(ctx);
    const $state = state($store);
    const $getters = getters($store);
    
    $state.number; // 1
    $getters.get_number; // 1

    Also...

    $store.state.number; // 1
    $store.getters.get_number; // 1
    

    Store actions and mutations

    Actions and mutations now use Proxies to forward the action or mutation name on to the store. If you didn't define a payload in the function, then the payload is either null or left blank; otherwise, TypeScript will automatically detect the payload type and insert it into the tooltip.

    import { actions, mutations, state, store } from "vuex-functional";
    import { options } from "path/to/my/store";
    
    // ...
    
    const $store = store<typeof options>(ctx);
    const $actions = actions($store);
    const $mutations = mutations($store);
    
    $mutations.SET_NUMBER({ number: 9 });
    await $actions.no_payload(); // `true`
    
    state($store).number; // 9

    Store modules

    Modules can also be extracted, and passed back into the other functions to access their methods and state:

    import { actions, getters, modules, mutations, state, store } from "vuex-functional";
    import { options } from "path/to/my/store";
    
    // ...
    
    const $store = store<typeof options>(ctx);
    
    const $barModule = modules($store).bar;
    
    // This mutation forwards to the main store
    mutations($barModule).BAR_SET_STRING("hello, world!");
    
    state($store).string; // "hello, world!"
    state($barModule).bar; // "hello, world!"

    All accessors at once

    import { makeAccessors, store } from "vuex-functional";
    import { options } from "path/to/my/store";
    
    // ...
    
    const $store = store<typeof options>(ctx);
    
    const { commit: $commit, dispatch: $dispatch, state: $state, getters: $getters } = makeAccessors($store);
    
    //
    // Your code here
    //

    Install

    npm i vuex-functional

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    97.2 kB

    Total Files

    97

    Last publish

    Collaborators

    • avatar