# vuex-asr

# Automated Store Resolution for Vue

• Version: 0.7.52
• License M.I.T.
• Github Repository
• author: Joris Wenting
• email: vuex.asr@gmail.com
• linkedIn.
• contribute

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

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

# 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!",
             }
           },
    ...