# hello world example

In the example below you find an example of the most basic implementation of vuex-asr. All the examples in this tutorial have sandbox environments in codesandbox, open them in another tab and follow along.

# the store

Now the store is the central place where we put variables used throughout our application front end:

    // src/vuex/store.js
    
    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    const Store = new Vuex.Store({
      state: {
        message: "This is a message in the Root of VUEX",
      }
    });
    
    export { Store };

As you can see, we've created a variable message in the state section of the store.

# the application file main.js

In the main.js file we implement the store we've created in src/vuex/store.js and use our plugin.

    // src/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 actually this is all we have to do to start making use of the vuex-asr functionality.

# the App component

In the App.vue component we use vuex-asr to bind the message value from the store to a component:

    // src/App.vue
    
    <template>
      <div id="app">
        <example-message asr-bind-state="message"/>
      </div>
    </template>
    
    <script>
    import ExampleMessage from "./components/ExampleMessage";
    
    export default {
      name: "App",
      components: {
        ExampleMessage,
      }
    };
    </script>

Notice the asr-bind-state property in the <example-message> component. This binds the message variable from the store to the component. If the store updates the message variable all components that it's bound to will update automatically.

# the Example Message component

In the example component we now just can use the variable message

    // src/components/ExampleMessage.vue
    
    <template>
      <p>{{ message }}</p>
    </template>

# aliasing

Aliasing gives you the ability to map your bindings.

Let's say we have a store:

...

const Store = new Vuex.Store({
  state: {
    message: "message in Root of VUEX",
    anotherMessage: "another message!"
  }
});

...

Now we wanna reuse the component <example-message>, but this component has message as local variable. Now the helper aliasing could do that trick and reuse (re-instantiate) the component <example-message> with other bindings with the help of the AS keyword:

// src/App.vue

<template>
  <div id="app">
    <example-message asr-bind-state="message"/>
    <example-message asr-bind-state="anotherMessage AS message"/>
  </div>
</template>

...  

Notice the AS syntax: the state item anotherMessage is now bound under the name message so the component can make use of it under that name: message.

And for reference:

    // src/components/ExampleMessage.vue
    
    <template>
      <p>{{ message }}</p>
    </template>

# next steps

This is the simplest implementation of vuex-asr. In the next chapter you'll see how you could also bind a getter.