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
1 lines • 5.71 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{223:function(e,t,a){"use strict";a.r(t);var n=a(0),s=Object(n.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:"binding-multiple-objects-to-a-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#binding-multiple-objects-to-a-component","aria-hidden":"true"}},[e._v("#")]),e._v(" binding multiple objects to a component")]),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-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. 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. And in the "),a("a",{attrs:{href:"https://www.notion.so/namespacing-1c0724cae0ab45bf9aa8009df2b25fca",target:"_blank",rel:"noopener noreferrer"}},[e._v("namespacing"),a("OutboundLink")],1),e._v(" tutorial we saw how we could create our own code organisation with namespaces.")]),e._v(" "),a("p",[e._v("Since VUEXasr is intended to make building large scale applications more easy let's see how we could bind multiple objects to a component.")]),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-binding-multiple-objects-to-a-component-1pitc",target:"_blank",rel:"noopener noreferrer"}},[a("OutboundLink")],1)]),e._v(" "),a("h2",{attrs:{id:"message-board"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-board","aria-hidden":"true"}},[e._v("#")]),e._v(" message board")]),e._v(" "),a("p",[e._v("As I like to keep the examples as simple as possible let's reuse the previous example but now let's delegate multiple message objects into one component the MessageBoard 🤘")]),e._v(" "),a("p",[e._v("First let's make a message board:")]),e._v(" "),a("pre",[a("code",[e._v("// src/components/MessageBoard.vue\n\n<template>\n<div>\n <h1>A message from the root of the store</h1>\n <p>"+e._s(e.message)+"</p>\n <h1>Another message from the root of the store</h1>\n <p>"+e._s(e.anotherMessage)+"</p>\n <h1>A message from the User Module</h1>\n <p>"+e._s(e.messageUser)+"</p>\n</div>\n</template>\n")])]),e._v(" "),a("p",[e._v("notice that this component takes 3 variables:")]),e._v(" "),a("ul",[a("li",[e._v("message")]),e._v(" "),a("li",[e._v("anotherMessage")]),e._v(" "),a("li",[e._v("messageUser")])]),e._v(" "),a("p",[e._v("Now let's see how we could bind objects to these variables:")]),e._v(" "),a("pre",[a("code",[e._v('// src/App.vue\n\n<template>\n <div id="app">\n\t\t<message-board\n\t asr-bind-state="message, \n\t anotherMessage, \n\t USER/message AS messageUser"\n\t ></message-board>\n <text-input asr-bind-state="message IS v-model"/>\n <text-input asr-bind-state="anotherMessage IS v-model"/>\n <text-input asr-bind-state="USER/message AS messageUser IS v-model"/>\n </div>\n</template>\n\n<script>\nimport MessageBoard from "./components/MessageBoard";\nimport TextInput from "./components/TextInput";\n\nexport default {\n name: "App",\n components: {\n MessageBoard,\n\t\tTextInput\n }\n};\n<\/script>\n')])]),e._v(" "),a("p",[e._v("Notice, the comma separated notation which is split into multiple lines for convenience and readability.")]),e._v(" "),a("h2",{attrs:{id:"namespacing-pipe-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#namespacing-pipe-convention","aria-hidden":"true"}},[e._v("#")]),e._v(" namespacing pipe convention")]),e._v(" "),a("p",[e._v("There is an important convention for the namespace pipe syntax and it is as follows:")]),e._v(" "),a("p",[e._v("All variables declared after a pipe must be in the same namespace (module), up until a new namespace is declared. Before a namespace has been declared VUEXasr assumes the variables live in the global (root) namespace, so therefor these MUST be declared first.")]),e._v(" "),a("pre",[a("code",[e._v('<some-component\n\t asr-bind-state="message, \n\t anotherMessage, \n\t USER/messageUser AS message,\n\t\t\t\t\t\t\t\t\tuserObject,\n\t\t\t\t\t\t\t\t\tPHOTOS/recentPhotos,\n\t\t\t\t\t\t\t\t\tlikedPhotos"\n></some-component>\n')])]),e._v(" "),a("p",[e._v("In the example above these variables live in the global (root) namespace:")]),e._v(" "),a("ul",[a("li",[e._v("message")]),e._v(" "),a("li",[e._v("anotherMessage")])]),e._v(" "),a("p",[e._v("These live in the USER namespace:")]),e._v(" "),a("ul",[a("li",[e._v("messageUser (aliassed to 'message')")]),e._v(" "),a("li",[e._v("userObject")])]),e._v(" "),a("p",[e._v("These live in the PHOTOS namespace:")]),e._v(" "),a("ul",[a("li",[e._v("recentPhotos")]),e._v(" "),a("li",[e._v("likedPhotos")])]),e._v(" "),a("p",[e._v("Well isn't that convenient? There is even another slick way to achieve the same functionality and even more with the asr-bind-state-config property coming up next 💪")])])}),[],!1,null,null,null);t.default=s.exports}}]);