vuex-asr
Version:
* 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
71 lines (60 loc) • 20 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>aliasing | Vuex ASR</title>
<meta name="description" content="Automated store resolution for Vue.js">
<link rel="icon" href="../vue-logo.png">
<link rel="preload" href="/vuex-asr/assets/css/0.styles.ba1a25a1.css" as="style"><link rel="preload" href="/vuex-asr/assets/js/app.51a1fadf.js" as="script"><link rel="preload" href="/vuex-asr/assets/js/2.b4a928f2.js" as="script"><link rel="preload" href="/vuex-asr/assets/js/27.8c51c981.js" as="script"><link rel="prefetch" href="/vuex-asr/assets/js/10.d050881c.js"><link rel="prefetch" href="/vuex-asr/assets/js/11.4a0808ab.js"><link rel="prefetch" href="/vuex-asr/assets/js/12.3c479c42.js"><link rel="prefetch" href="/vuex-asr/assets/js/13.3250c310.js"><link rel="prefetch" href="/vuex-asr/assets/js/14.62c5e3bf.js"><link rel="prefetch" href="/vuex-asr/assets/js/15.1246035b.js"><link rel="prefetch" href="/vuex-asr/assets/js/16.f2a6d574.js"><link rel="prefetch" href="/vuex-asr/assets/js/17.c0c4ba46.js"><link rel="prefetch" href="/vuex-asr/assets/js/18.7f284ab7.js"><link rel="prefetch" href="/vuex-asr/assets/js/19.af7a8adf.js"><link rel="prefetch" href="/vuex-asr/assets/js/20.d5e4f501.js"><link rel="prefetch" href="/vuex-asr/assets/js/21.4073ea7c.js"><link rel="prefetch" href="/vuex-asr/assets/js/22.46346157.js"><link rel="prefetch" href="/vuex-asr/assets/js/23.4ac41cbb.js"><link rel="prefetch" href="/vuex-asr/assets/js/24.72b4b854.js"><link rel="prefetch" href="/vuex-asr/assets/js/25.3f626a44.js"><link rel="prefetch" href="/vuex-asr/assets/js/26.ed8ed3d3.js"><link rel="prefetch" href="/vuex-asr/assets/js/28.86d49fe1.js"><link rel="prefetch" href="/vuex-asr/assets/js/29.4ef76ef5.js"><link rel="prefetch" href="/vuex-asr/assets/js/3.2b8ad3c3.js"><link rel="prefetch" href="/vuex-asr/assets/js/30.7ad3ecff.js"><link rel="prefetch" href="/vuex-asr/assets/js/31.a8eb0654.js"><link rel="prefetch" href="/vuex-asr/assets/js/32.eb4c2bac.js"><link rel="prefetch" href="/vuex-asr/assets/js/33.00186259.js"><link rel="prefetch" href="/vuex-asr/assets/js/34.7b77e1ee.js"><link rel="prefetch" href="/vuex-asr/assets/js/35.26de21a8.js"><link rel="prefetch" href="/vuex-asr/assets/js/36.b062e03a.js"><link rel="prefetch" href="/vuex-asr/assets/js/37.bdead487.js"><link rel="prefetch" href="/vuex-asr/assets/js/38.2e2b47dd.js"><link rel="prefetch" href="/vuex-asr/assets/js/4.6cc4b15c.js"><link rel="prefetch" href="/vuex-asr/assets/js/5.51ffd98f.js"><link rel="prefetch" href="/vuex-asr/assets/js/6.f1224752.js"><link rel="prefetch" href="/vuex-asr/assets/js/7.3659af3a.js"><link rel="prefetch" href="/vuex-asr/assets/js/8.366b1b49.js"><link rel="prefetch" href="/vuex-asr/assets/js/9.af028c38.js">
<link rel="stylesheet" href="/vuex-asr/assets/css/0.styles.ba1a25a1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuex-asr/" class="home-link router-link-active"><!----> <span class="site-name">Vuex ASR</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuex-asr/" class="nav-link">Home</a></div><div class="nav-item"><a href="/vuex-asr/step-by-step-guide/hello-world-example.html" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vuex-asr/helpers/cheat-sheet.html" class="nav-link">Cheatsheet</a></div><div class="nav-item"><a href="/vuex-asr/helpers/contribute.html" class="nav-link">Contribute</a></div><div class="nav-item"><a href="https://github.com/vuex-asr/vuex-asr" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuex-asr/" class="nav-link">Home</a></div><div class="nav-item"><a href="/vuex-asr/step-by-step-guide/hello-world-example.html" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vuex-asr/helpers/cheat-sheet.html" class="nav-link">Cheatsheet</a></div><div class="nav-item"><a href="/vuex-asr/helpers/contribute.html" class="nav-link">Contribute</a></div><div class="nav-item"><a href="https://github.com/vuex-asr/vuex-asr" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Introduction</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuex-asr/" class="sidebar-link">vuex-asr</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Step by step guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuex-asr/step-by-step-guide/prerequisite.html" class="sidebar-link">prerequisite</a></li><li><a href="/vuex-asr/step-by-step-guide/installation.html" class="sidebar-link">installation</a></li><li><a href="/vuex-asr/step-by-step-guide/hello-world-example.html" class="sidebar-link">hello world example</a></li><li><a href="/vuex-asr/step-by-step-guide/getters-example.html" class="sidebar-link">hello world example with a getter</a></li><li><a href="/vuex-asr/step-by-step-guide/hello-world-of-2-way-binding.html" class="sidebar-link">hello world of 2 way binding</a></li><li><a href="/vuex-asr/step-by-step-guide/mutations.html" class="sidebar-link">mutations</a></li><li><a href="/vuex-asr/step-by-step-guide/actions.html" class="sidebar-link">actions</a></li><li><a href="/vuex-asr/step-by-step-guide/aliasing.html" class="active sidebar-link">aliasing</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuex-asr/step-by-step-guide/aliasing.html#alias-convention-for-all-binders" class="sidebar-link">alias convention for all binders</a></li><li class="sidebar-sub-header"><a href="/vuex-asr/step-by-step-guide/aliasing.html#reusability" class="sidebar-link">reusability</a></li><li class="sidebar-sub-header"><a href="/vuex-asr/step-by-step-guide/aliasing.html#anothermessage-as-message" class="sidebar-link">anotherMessage AS message</a></li><li class="sidebar-sub-header"><a href="/vuex-asr/step-by-step-guide/aliasing.html#next-steps" class="sidebar-link">next steps</a></li></ul></li><li><a href="/vuex-asr/step-by-step-guide/namespacing.html" class="sidebar-link">namespacing</a></li><li><a href="/vuex-asr/step-by-step-guide/passing-bindings.html" class="sidebar-link">passing a binding to a child component</a></li><li><a href="/vuex-asr/step-by-step-guide/binding-multiple-objects-to-a-component.html" class="sidebar-link">binding multiple objects to a component</a></li><li><a href="/vuex-asr/step-by-step-guide/binding-a-configuration.html" class="sidebar-link">binding a configuration</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Helpers</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuex-asr/helpers/asr-debug.html" class="sidebar-link">asr-debug</a></li><li><a href="/vuex-asr/helpers/working-with-the-test-suite.html" class="sidebar-link">working with the test-suite</a></li><li><a href="/vuex-asr/helpers/cheat-sheet.html" class="sidebar-link">cheatsheet</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="aliasing"><a href="#aliasing" aria-hidden="true" class="header-anchor">#</a> aliasing</h1> <p>It's time to see how we can make a component reusable by making use of the aliasing functionality of vuex-asr.</p> <p>For a quick overview go to the sandbox environment to follow along:</p> <div class="tip custom-block"><p class="custom-block-title">codesandbox</p> <p><a href="https://codesandbox.io/s/manual-hello-world-example-3tx2w" target="_blank" rel="noopener noreferrer">aliasing example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <h2 id="alias-convention-for-all-binders"><a href="#alias-convention-for-all-binders" aria-hidden="true" class="header-anchor">#</a> alias convention for all binders</h2> <p>The examples in this chapter illustrate how you could implement aliasing with <code>asr-bind-state</code>, but the convention is the same for all of the binders:</p> <ul><li>asr-bind-state</li> <li>asr-bind-getters</li> <li>asr-bind-mutations</li> <li>asr-bind-actions</li> <li>asr-bind-config</li> <li>asr-pass (you could also alias a pass variable!)</li></ul> <h2 id="reusability"><a href="#reusability" aria-hidden="true" class="header-anchor">#</a> reusability</h2> <p>A lot of programmers would say that the holy grail of programming is avoiding repetition of code. In other words making code as generic as possible to be able to reuse it. Two-way-binding up until now has been quite a pain in the ass since we need to explicitly tell a component to what store items (state, getters, mutations and actions) it is bound.</p> <p>This might sound a bit abstract, let's take a look at what this means:</p> <h2 id="anothermessage-as-message"><a href="#anothermessage-as-message" aria-hidden="true" class="header-anchor">#</a> anotherMessage AS message</h2> <p>Let's say we have two messages in our store:</p> <div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code> <span class="token comment">// src/vuex/store</span>
<span class="token operator">...</span>
<span class="token keyword">const</span> Store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
state<span class="token punctuation">:</span> <span class="token punctuation">{</span>
message<span class="token punctuation">:</span> <span class="token string">"This is a message in the Root of VUEX"</span><span class="token punctuation">,</span>
anotherMessage<span class="token punctuation">:</span> <span class="token string">"This is ANOTHER message in the Root of VUEX"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
</code></pre></div><p>Now let's see if we can display them both using the same components as we used in out previous example.</p> <div class="language-vue extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-vue"><code> // src/App.vue
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>example-message</span> <span class="token attr-name">asr-bind-state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>example-message</span> <span class="token attr-name">asr-bind-state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anotherMessage AS message<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text-input</span> <span class="token attr-name">asr-bind-state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message IS v-model<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text-input</span> <span class="token attr-name">asr-bind-state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anotherMessage AS message IS v-model<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> ExampleMessage <span class="token keyword">from</span> <span class="token string">"./components/ExampleMessage"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> TextInput <span class="token keyword">from</span> <span class="token string">"./components/TextInput"</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">"App"</span><span class="token punctuation">,</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
ExampleMessage<span class="token punctuation">,</span>
TextInput
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p>Notice that we use the <code>AS</code> keyword to map <code>anotherMessage</code> to <code>message</code>. So the components <code><example message></code> and <code><text-input></code> can remain using the variable <code>message</code> in their template.</p> <p>Also notice that we are still able to use the <code>IS</code> keyword to tell vuex-asr that <code>anotherMessage</code> is a model.</p> <p>For completeness:</p> <div class="language-vue extra-class"><pre class="language-vue"><code> // src/components/ExampleMessage.vue
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code> // src/components/TextInput.vue
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><p>So this means a <strong>generic</strong> name in the component and specific names in the store correctly mapped in the component's attribute offering a lot of flexibility 🤓.</p> <h2 id="next-steps"><a href="#next-steps" aria-hidden="true" class="header-anchor">#</a> next steps</h2> <p>In the next chapter we go deeper into <a href="/vuex-asr/step-by-step-guide/namespacing.html">namespacing</a> and how this feature could help us to further improve the organisation of our front-end codebase.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vuex-asr/step-by-step-guide/actions.html" class="prev">actions</a></span> <span class="next"><a href="/vuex-asr/step-by-step-guide/namespacing.html">namespacing</a>→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/vuex-asr/assets/js/app.51a1fadf.js" defer></script><script src="/vuex-asr/assets/js/2.b4a928f2.js" defer></script><script src="/vuex-asr/assets/js/27.8c51c981.js" defer></script>
</body>
</html>