vuex-asr/docs/.vuepress/dist/assets/js/21.4073ea7c.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([[21],{227:function(e,t,a){"use strict";a.r(t);var o=a(0),n=Object(o.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:"namespacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#namespacing","aria-hidden":"true"}},[e._v("#")]),e._v(" namespacing")]),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"),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 the "),a("a",{attrs:{href:"https://www.notion.so/aliasing-1221d6b07fa1480198d8284b0743c521",target:"_blank",rel:"noopener noreferrer"}},[e._v("alias"),a("OutboundLink")],1),e._v(" function to make components reusable.")]),e._v(" "),a("p",[e._v("Since VUEXasr is intended to make building large scale applications more easy let's see what namespacing could bring to the table.")]),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-namespacing-6gpkj",target:"_blank",rel:"noopener noreferrer"}},[a("OutboundLink")],1)]),e._v(" "),a("h1",{attrs:{id:"code-organisation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#code-organisation","aria-hidden":"true"}},[e._v("#")]),e._v(" code organisation")]),e._v(" "),a("p",[e._v("There are many reasons as much as ways to organise your code. And I'm not here to tell you how to organise it. But in order to be able to organise it, you need at least to be able to namespace the aspects of your application.")]),e._v(" "),a("h3",{attrs:{id:"vuex-namespacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vuex-namespacing","aria-hidden":"true"}},[e._v("#")]),e._v(" vuex namespacing")]),e._v(" "),a("p",[e._v("Since VUEX offers you an out-of-the box solution to organise your store, VuexASR follows this and enables you to namespace your store objects as well.")]),e._v(" "),a("p",[e._v("Let's take a look at the "),a("a",{attrs:{href:"https://www.notion.so/aliasing-1221d6b07fa1480198d8284b0743c521",target:"_blank",rel:"noopener noreferrer"}},[e._v("previous example"),a("OutboundLink")],1),e._v(" and extend our store with a User Module:")]),e._v(" "),a("pre",[a("code",[e._v('// src/vuex/store.js\n    \nimport Vue from "vue";\nimport Vuex from "vuex";\nimport { ModuleUser } from "./modules/module-user";\n\nVue.use(Vuex);\n\nconst Store = new Vuex.Store({\n  modules: {\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(" "),a("p",[e._v("Notice the "),a("code",[e._v("modules")]),e._v(" property added to the store. In here we've created the namespace "),a("code",[e._v("USER")]),e._v(" to which we assign the imported module.")]),e._v(" "),a("pre",[a("code",[e._v('// src/vuex/modules/module-user.js\n\nconst ModuleUser = {\n  namespaced: true,\n\tstate: {\n\t\tmessage: "I\'m a message in the USER namespace"\n  },\n};\n\nexport { ModuleUser };\n')])]),e._v(" "),a("p",[e._v("As you can see nothing complicated going on here, we just have another string as a message. But notice the property "),a("code",[e._v("namespaced")]),e._v(" set to "),a("code",[e._v("true")]),e._v(". This tell's vuex to use namespacing for this module, if you omit this the variables in this module would be available at rootlevel, and in our case create a naming conflict since we already have "),a("code",[e._v("message")]),e._v(" defined in the root (store.js) file.")]),e._v(" "),a("h3",{attrs:{id:"the-app-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-app-component","aria-hidden":"true"}},[e._v("#")]),e._v(" the App component")]),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\t  <example-message asr-bind-state="USER/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    <text-input asr-bind-state="USER/message IS v-model"/>\n  </div>\n</template>\n\n...\n')])]),e._v(" "),a("p",[e._v("Notice the namespace-slash-variable syntax: "),a("code",[e._v("USER/message")])]),e._v(" "),a("p",[e._v("This is all you need to do to tell VUEXasr to pick the message object from the user-module.")]),e._v(" "),a("p",[e._v("In the next chapter you can see how you can assigning multiple store objects to a component ⚡️.")])])}),[],!1,null,null,null);t.default=n.exports}}]);