vuex-asr

Automated Store Resolution for Vue

For a quick overview of a full implementation of vuex-asr, take a look at the codesandbox todo-mvc-example

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.

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.

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>.

get familiar with the concepts

hello world example.

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",
               firstName: "local firstName",
               lastName: "local lastName",
               somethingElse: "jahoeee, this is it!",
             }
           },
    ...