vuex-asr/docs/.vuepress/dist/assets/js/17.c0c4ba46.js

* Version: 0.7.52 * License M.I.T. * [Online Documentation](https://vuex-asr.github.io/vuex-asr/) * author: Joris Wenting * email: vuex.asr@gmail.com * [linkedIn](https://www.linkedin.com/in/joriswenting/). * [contribute](https://vuex-asr.github.io/vuex-a

(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{220:function(e,t,a){"use strict";a.r(t);var s=a(0),n=Object(s.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"aliasing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#aliasing","aria-hidden":"true"}},[e._v("#")]),e._v(" aliasing")]),e._v(" "),a("p",[e._v("In the "),a("a",{attrs:{href:"https://www.notion.so/hello-world-example-f301739ea9f743959fd6f741d14d3a47",target:"_blank",rel:"noopener noreferrer"}},[e._v("hello world example"),a("OutboundLink")],1),e._v(" we saw that we can bind a variable from the store to the component with asr-bind-state. In the "),a("a",{attrs:{href:"https://www.notion.so/hello-world-of-2-way-binding-0745851653ab4ac8b07e42d088961689",target:"_blank",rel:"noopener noreferrer"}},[e._v("hello world of 2 way binding example"),a("OutboundLink")],1),e._v(" we saw we can bind a model that can mutate a store object. And we also learned we could make use of aliases in the "),a("a",{attrs:{href:"https://www.notion.so/aliasing-1221d6b07fa1480198d8284b0743c521",target:"_blank",rel:"noopener noreferrer"}},[e._v("aliasing example"),a("OutboundLink")],1),e._v(" function to make components reusable.")]),e._v(" "),a("p",[e._v("Now it's time to see how we can make a component reusable by making use of the alias function of VUEX ASR.")]),e._v(" "),a("p",[e._v("For a quick overview go to the sandbox environment to follow along:")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://codesandbox.io/s/manual-aliasing-qer7w",target:"_blank",rel:"noopener noreferrer"}},[a("OutboundLink")],1)]),e._v(" "),a("h1",{attrs:{id:"reusability"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reusability","aria-hidden":"true"}},[e._v("#")]),e._v(" Reusability")]),e._v(" "),a("p",[e._v("A lot of programmers would say that the holy grail of programming is avoiding repetition of code. In other words make code as generic as possible to be able to reuse it. 2-way-binding up until now has been quite a pain in the ass since we need to explicitly tell a component to what store objects (a.k.a. store variables) it is bound.")]),e._v(" "),a("h2",{attrs:{id:"anothermessage-as-message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#anothermessage-as-message","aria-hidden":"true"}},[e._v("#")]),e._v(" anotherMessage AS message")]),e._v(" "),a("p",[e._v("VuexASR is here to prevent you from doing so. Let's see how this works out.")]),e._v(" "),a("p",[e._v("Let's say we have two messages in our store:")]),e._v(" "),a("pre",[a("code",[e._v('// src/vuex/store\n\n...\n\nconst Store = new Vuex.Store({\n  state: {\n    message: "This is a message in the Root of VUEX",\n\t\tanotherMessage: "This is ANOTHER message in the Root of VUEX",\n  }\n});\n\n...\n')])]),e._v(" "),a("p",[e._v("No let's see if we can display them both using the same components as we used in out previous example.")]),e._v(" "),a("pre",[a("code",[e._v('// src/App.vue\n\n<template>\n  <div id="app">\n    <example-message asr-bind-state="message"/>\n\t  <example-message asr-bind-state="anotherMessage AS message"/>\n\n    <text-input asr-bind-state="message IS v-model"/>\n    <text-input asr-bind-state="anotherMessage AS message IS v-model"/>\n  </div>\n</template>\n\n<script>\nimport ExampleMessage from "./components/ExampleMessage";\nimport TextInput from "./components/TextInput";\n\nexport default {\n  name: "App",\n  components: {\n    ExampleMessage,\n\t\tTextInput\n  }\n};\n<\/script>\n')])]),e._v(" "),a("p",[e._v("Notice that we use the "),a("code",[e._v("AS")]),e._v(" keyword that tells to use "),a("code",[e._v("anotherMessage")]),e._v(" as "),a("code",[e._v("message")]),e._v(". So the components "),a("code",[e._v("<example message>")]),e._v(" and "),a("code",[e._v("<text-input>")]),e._v(" could remain using message in their template.")]),e._v(" "),a("p",[e._v("Also notice that (of course) we still are able to use the "),a("code",[e._v("IS")]),e._v(" keyword to tell VUEXasr that anotherMessage is a model that could be mutated.")]),e._v(" "),a("p",[e._v("Already we are a lot more flexible than we used to be, but hold on there is more 🤓")])])}),[],!1,null,null,null);t.default=n.exports}}]);