vuex-asr/docs/.vuepress/dist/assets/js/18.7f284ab7.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([[18],{204:function(e,t,n){"use strict";n.r(t);var a=n(0),o=Object(a.a)({},(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[n("h1",{attrs:{id:"bind-a-configuration"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bind-a-configuration","aria-hidden":"true"}},[e._v("#")]),e._v(" bind a configuration")]),e._v(" "),n("p",[e._v("This feature is working, but it needs some refinement!")]),e._v(" "),n("h3",{attrs:{id:"what-problem-i-d-try-to-solve-with-asr-bind-state-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#what-problem-i-d-try-to-solve-with-asr-bind-state-config","aria-hidden":"true"}},[e._v("#")]),e._v(" What problem I'd try to solve with asr-bind-state-config")]),e._v(" "),n("p",[e._v("Sometimes you wanna reuse a complex component that uses multiple bindings. Although you can already do this with "),n("code",[e._v("asr-bind-state")]),e._v(" there are situations you'd like to serve your configuration from the Vuex store. A reason could be that you might wanna:")]),e._v(" "),n("ul",[n("li",[e._v("define your bindings configuration in a central place")]),e._v(" "),n("li",[e._v("retrieve binding configurations via a configuration file or even an API")])]),e._v(" "),n("p",[e._v("The latter is one of the most important reasons I think there are.")]),e._v(" "),n("p",[e._v("An example I have is a situation that I'd like to render a menu with menu-items that have bindings.")]),e._v(" "),n("p",[e._v("In this case I need an array of items that describe the menu, such as title.inactive, title.active, icon.active, icon.inactive.")]),e._v(" "),n("p",[e._v("Since we have this array why not also describe the items bindings in this same array?")]),e._v(" "),n("p",[e._v("Why not also describe the items bindings in the same array?")]),e._v(" "),n("p",[e._v("Now we can create a lean configuration file that contains all the information to create menuItems and bind them to the state:")]),e._v(" "),n("pre",[n("code",[e._v("// Show configuration file\n")])]),e._v(" "),n("p",[e._v("NOTE: The configuration array is bound to the object too, and is availlable under it's bounds name.")]),e._v(" "),n("p",[e._v("now we can create a component that renders the menu")]),e._v(" "),n("p",[e._v("it will contain menuItems")]),e._v(" "),n("to",{attrs:{be:"",continued:""}},[n("p",[e._v("In the "),n("a",{attrs:{href:"https://www.notion.so/hello-world-example-f301739ea9f743959fd6f741d14d3a47",target:"_blank",rel:"noopener noreferrer"}},[e._v("hello world example"),n("OutboundLink")],1),e._v(" we saw that we can bind a variable from the store to the component with asr-bind-state. In the "),n("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"),n("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 "),n("a",{attrs:{href:"https://www.notion.so/aliasing-1221d6b07fa1480198d8284b0743c521",target:"_blank",rel:"noopener noreferrer"}},[e._v("aliasing example"),n("OutboundLink")],1),e._v(" to make components reusable. In the "),n("a",{attrs:{href:"https://www.notion.so/namespacing-1c0724cae0ab45bf9aa8009df2b25fca",target:"_blank",rel:"noopener noreferrer"}},[e._v("namespacing"),n("OutboundLink")],1),e._v(" tutorial we saw how we could create our own code organisation with namespaces. And lastly we learned how to "),n("a",{attrs:{href:"https://www.notion.so/binding-multiple-objects-to-a-component-318d2d34410248a3b3d6fd47fd797abf",target:"_blank",rel:"noopener noreferrer"}},[e._v("bind multiple objects"),n("OutboundLink")],1),e._v(" into a component including namespacing.")]),e._v(" "),n("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 with the use of a configuration.")]),e._v(" "),n("p",[e._v("For a quick overview go to the sandbox environment to follow along:")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://codesandbox.io/s/manual-bind-a-configuration-mtk1n",target:"_blank",rel:"noopener noreferrer"}},[n("OutboundLink")],1)]),e._v(" "),n("h2",{attrs:{id:"asr-bind-state-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#asr-bind-state-config","aria-hidden":"true"}},[e._v("#")]),e._v(" asr-bind-state-config")]),e._v(" "),n("p",[e._v("At first asr-bind-state-config was intended to replace the multiple variable declaration at component asr-bind-state property as shown in the "),n("a",{attrs:{href:"https://www.notion.so/binding-multiple-objects-to-a-component-318d2d34410248a3b3d6fd47fd797abf",target:"_blank",rel:"noopener noreferrer"}},[e._v("previous chapter"),n("OutboundLink")],1),e._v(". But I found that both options have their own charm.")]),e._v(" "),n("p",[e._v("So what is this  anyway:")]),e._v(" "),n("p",[e._v("asr-bind-state-config elevates the declaration of bindings from the Vue template to the store.")]),e._v(" "),n("p",[e._v("For this example I've created a new vuex module with the sole purpose of containing a configuration:")]),e._v(" "),n("pre",[n("code",[e._v('// src/vuex/modules/module-general.js\n\nconst ModuleGeneral = {\n  namespaced: true,\n  state: {\n    messageConfig: [\n      {\n        storeKey: "message"\n      },\n      {\n        storeKey: "anotherMessage"\n      },\n\t\t\t{\n\t\t\t\tnamespace: "USER",\n\t\t\t\tstoreKey: "messageUser"\n\t\t\t},\n    ]\n  }\n};\n\nexport { ModuleGeneral };\n')])]),e._v(" "),n("p",[e._v("We need to import this module in the store:")]),e._v(" "),n("pre",[n("code",[e._v('// src/vuex/store.js\n\nimport Vue from "vue";\nimport Vuex from "vuex";\nimport { ModuleGeneral } from "./modules/module-general";\nimport { ModuleUser } from "./modules/module-user";\n\nVue.use(Vuex);\n\nconst Store = new Vuex.Store({\n  modules: {\n    GENERAL: ModuleGeneral,\n    USER: ModuleUser\n  },\n  state: {\n    message: "message in Root of VUEX",\n    anotherMessage: "also a message in Root of VUEX"\n  }\n});\n\nexport { Store };\n')])]),e._v(" "),n("p",[e._v("now let's see if we can bind the config in our App.vue file:")]),e._v(" "),n("pre",[n("code",[e._v('// src/App.vue\n\n<template>\n  <div id="app">\n    <message-board asr-bind-state-config="GENERAL/messageConfig"></message-board>\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(" "),n("h2",{attrs:{id:"reactivity-of-bound-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#reactivity-of-bound-config","aria-hidden":"true"}},[e._v("#")]),e._v(" reactivity of bound config")]),e._v(" "),n("p",[e._v("Now some extra power comes in, we can hotswap a configuration, since the asr-bind-state-config itself is reactive too 🤘.")]),e._v(" "),n("p",[e._v("I'm looking for a nice implementation of this as an example and will post it on this page shortly.")])])],1)}),[],!1,null,null,null);t.default=o.exports}}]);