Natively Pluggable Module

    vuex-asr

    0.7.52 • Public • Published

    Vuex-ASR - Automated Store Resolution for Vue

    Example TodoMVC app

    For a quick overview of a full implementation of vuex-asr, take a look at the codesandbox todo-mvc-example or visit the git-repository.

    install

    You can install the package via NPM:

    npm install vuex-asr

    setup

    In your (typically) main.js:

    import Vue from "vue";
    import App from "./App.vue";
    import { Store } from "./vuex/store";
    import VuexASR from "vuex-asr";
     
    Vue.use(VuexASR);
     
    new Vue({
      render: h => h(App),
      store: Store
    }).$mount("#app");

    and you're ready to use vuex-asr.

    what is vuex-asr?

    Vuex-asr removes the necessity to describe your vuex store bindings in the component's script. With vuex-asr you're able to bind state, getters, mutations and actions from the component's attributes\directives:

    • asr-bind-state
    • asr-bind-getters
    • asr-bind-mutations
    • asr-bind-actions

    The plugin automatically resolves bindings and is able to map them from the component's attributes, allowing your component's code to become generic and independent from the Vuex store 😎.

    vuex-asr provides full interactivity with vuex.

    codesandbox examples

    The step by step guide contains examples with codesandboxes so you could start right away with exploring the features, with no setup required.

    tl;dr

    generic components able to be stateful

    With vuex-asr you could start developing your codebase with generic components (no bindings described in the component code) and hook them up to the vuex ecosystem, by the attribute of the component.

    simple example

    Assume you have a vuex store:

    const Store = new Vuex.Store({
      state: {
        message: "This is a message in the Root of VUEX",
      }
    });

    With asr-bind-state you could bind the state item message like this:

    <message-component asr-bind-state="message"/>

    If you have your state item in a namespace you could bind it like this:

    <message-component asr-bind-state="User/Settings/message"/>

    If you have to alias your state item to match components name convention:

    <message-component asr-bind-state="User/Settings/notifyMessage AS message"/>

    This will bind the the state item notifyMessage, living in the namespace User/Settings, AS message to the <message-component>.

    // MessageComponent.vue
     
    <template>    
        <div class="some-markup">
            {{ message }}
        </div>
    </template>

    about reactivity

    If User/Settings/notifyMessage updates in the store, the message in <message-component> will update too.

    a more complex implementation

    We could also use it to provide more complex components with store bindings:

        <some-component
          asr-bind-state="
            message, 
            USER/userObject AS user,
            PHOTOS/recentPhotos
            PHOTOS/likedPhotos"
          asr-bind-getters="
            PHOTOS/recentPhotos
            PHOTOS/likedPhotos"
          asr-bind-mutations="
            USER/setMessageUser
            PHOTOS/addNewPhoto"
          asr-bind-actions="
            PHOTOS/fetchNewPhotos"
        ></some-component>

    In this case we bind state, getters, mutations and actions items to <some-component>.

    Follow the step by step manual to get started it contains sandboxes, so no setup is required to try out all of the examples and fiddle around.

    Update

    30-12-2019: overwrite local variables with store bindings! Documentation will be updated soon with examples. 15-01-2019: update with some refactoring for better control flow, the test-suite/views/Sandbox.vue contains an example on how to overwrite data function properties.

    The binding message:

            <example-message asr-bind-state="message"/>

    Will overwite 'message' in the returned object in data and leaves the other attributes in it:

        // src/components/ExampleMessage.vue
     
        ...
               data() {
                 return {
                   message: "local Message",  // <-- this one
                   firstName: "local firstName",
                   lastName: "local lastName",
                   somethingElse: "jahoeee, this is it!",
                 }
               },
        ...

    Install

    npm i vuex-asr

    DownloadsWeekly Downloads

    61

    Version

    0.7.52

    License

    MIT

    Unpacked Size

    1.71 MB

    Total Files

    196

    Last publish

    Collaborators

    • joriswenting