vuex-asr/docs/.vuepress/dist/assets/js/20.d5e4f501.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([[20],{225:function(e,t,a){"use strict";a.r(t);var n=a(0),o=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:"hello-world-example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world-example","aria-hidden":"true"}},[e._v("#")]),e._v(" hello world example")]),e._v(" "),a("p",[e._v("In the example below I'll give you an example of the most basic implementation 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-hello-world-example-3tx2w",target:"_blank",rel:"noopener noreferrer"}},[a("OutboundLink")],1)]),e._v(" "),a("h1",{attrs:{id:"preamble"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#preamble","aria-hidden":"true"}},[e._v("#")]),e._v(" preamble")]),e._v(" "),a("p",[e._v("The setup assumes having a component based VUE setup implementing VUEX, you could checkout the basic configuration of this in the "),a("a",{attrs:{href:"https://www.notion.so/hello-world-example-f301739ea9f743959fd6f741d14d3a47#d37790323d1d4b788fba3adb5c20e041",target:"_blank",rel:"noopener noreferrer"}},[e._v("sandbox environment"),a("OutboundLink")],1),e._v(".")]),e._v(" "),a("h2",{attrs:{id:"the-store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-store","aria-hidden":"true"}},[e._v("#")]),e._v(" the store")]),e._v(" "),a("p",[e._v("Now the store is the central place where to put all the variables used throughout your application front end:")]),e._v(" "),a("pre",[a("code",[e._v('// src/vuex/store.js\n\nimport Vue from "vue";\nimport Vuex from "vuex";\n\nVue.use(Vuex);\n\nconst Store = new Vuex.Store({\n  state: {\n    message: "This is a message in the Root of VUEX",\n  }\n});\n\nexport { Store };\n')])]),e._v(" "),a("p",[e._v("As you can see, we've created a variable "),a("code",[e._v("message")]),e._v(" in the state section of the store.")]),e._v(" "),a("h2",{attrs:{id:"the-application-file-main-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-application-file-main-js","aria-hidden":"true"}},[e._v("#")]),e._v(" the application file main.js")]),e._v(" "),a("p",[e._v("In the main.js file we implement the store we've created in "),a("code",[e._v("src/vuex/store.js")])]),e._v(" "),a("pre",[a("code",[e._v('// src/main.js\n\nimport Vue from "vue";\nimport App from "./App.vue";\nimport { Store } from "./vuex/store";\nimport VuexASR from "./plugins/vuex-asr/vuex-asr";\n\nVue.use(VuexASR);\n\nnew Vue({\n  render: h => h(App),\n  store: Store\n}).$mount("#app");\n')])]),e._v(" "),a("p",[e._v("And actually this is all we have to do to start making use of the VuexASR functionality.")]),e._v(" "),a("h2",{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("p",[e._v("In the App.vue component we use to demonstrate the use of vuex-asr to bind the "),a("code",[e._v("message")]),e._v(" value from the store to a 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  </div>\n</template>\n\n<script>\nimport ExampleMessage from "./components/ExampleMessage";\n\nexport default {\n  name: "App",\n  components: {\n    ExampleMessage,\n  }\n};\n<\/script>\n')])]),e._v(" "),a("p",[e._v("Notice the "),a("code",[e._v("asr-bind-state")]),e._v(" property in the "),a("code",[e._v("<example-message>")]),e._v(" component. This binds the "),a("code",[e._v("message")]),e._v(" variable from the store to the component. If the store updates the message variable the component that it's bound to will update automatically.")]),e._v(" "),a("h2",{attrs:{id:"the-example-message-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-example-message-component","aria-hidden":"true"}},[e._v("#")]),e._v(" the Example Message component")]),e._v(" "),a("p",[e._v("In the example component we now just can use the variable "),a("code",[e._v("message")])]),e._v(" "),a("pre",[a("code",[e._v("// src/components/ExampleMessage.vue\n\n<template>\n  <p>"+e._s(e.message)+"</p>\n</template>\n")])]),e._v(" "),a("p",[e._v("This is the simplest implementation of VUEX-ASR.")]),e._v(" "),a("p",[e._v("But hold on we're not completely done yet, just to show a primitive example of two-way-binding with VUEX-ASR we need to create an input so we can "),a("strong",[e._v("mutate")]),e._v(" the variable and see if this actually updates the variable in dependent components...")])])}),[],!1,null,null,null);t.default=o.exports}}]);