# hello world of 2 way binding

In the hello world example and getters example we saw that we can bind a variable or a getter from the store to the component with asr-bind-state and asr-bind-getters. Now let's see if we can update the variable in one component and have it being updated in the other. For this we'll extend our hello world example.

# a note on direct state bindings

Binding a state item and being able to mutate it is called 2 way model binding. In this example we are going to directly bind a state item as a model. This is quite useful in the rapid-prototyping phase of the project, but definitely NOT RECOMMENDED in production. For production it is recommended to use vuex mutations for synchronous- and actions for asynchronous manipulation of state items. Read more in working with mutations

# binding a model

Let's take a look at the store again:

    // 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 };

To make the store variable message (as we used in our previous example) 2-way-bound, we need to tell the component that the variable is a model. (Meaning it implements both a getter and a setter).

So for this example we have to update our App.vue file:

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

Notice that we also use the property asr-bind-state but we tell that the variable message is a model:

asr-bind-state="message IS v-model"

or simpler:

asr-bind-state="message IS model"

# the Text Input component

Now that we have our variable message available as a model we can simply assign it to an input's v-model property:

    // src/components/TextInput.vue
    
    <template>
      <input v-model="message">
    </template>

For more on this see Vue documentation on v-model

# next steps

So now you know how to bind a state object as a simple model, let's take a look at how we could bind actions and mutations to take full advantage of vuex state-management.