vuex-asr/docs/.vuepress/dist/assets/js/5.51ffd98f.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([[5],{211:function(t,s,a){"use strict";a.r(s);var e=a(0),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"vuex-asr"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vuex-asr","aria-hidden":"true"}},[t._v("#")]),t._v(" vuex-asr")]),t._v(" "),a("h2",{attrs:{id:"automated-store-resolution-for-vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#automated-store-resolution-for-vue","aria-hidden":"true"}},[t._v("#")]),t._v(" Automated Store Resolution for Vue")]),t._v(" "),a("ul",[a("li",[t._v("Version: 0.7.52")]),t._v(" "),a("li",[t._v("License M.I.T.")]),t._v(" "),a("li",[a("a",{attrs:{href:"https://github.com/vuex-asr/vuex-asr",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github Repository"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("author: Joris Wenting")]),t._v(" "),a("li",[t._v("email: vuex.asr@gmail.com")]),t._v(" "),a("li",[a("a",{attrs:{href:"https://www.linkedin.com/in/joriswenting/",target:"_blank",rel:"noopener noreferrer"}},[t._v("linkedIn"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("li",[a("router-link",{attrs:{to:"/helpers/contribute.html"}},[t._v("contribute")])],1)]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",[t._v("For a quick overview of a full implementation of vuex-asr, take a look at the codesandbox "),a("a",{attrs:{href:"https://codesandbox.io/s/template-test-tdvm7?fontsize=14&module=%2Fsrc%2FApp.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("todo-mvc-example"),a("OutboundLink")],1)])]),t._v(" "),a("h3",{attrs:{id:"what-is-vuex-asr"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-is-vuex-asr","aria-hidden":"true"}},[t._v("#")]),t._v(" what is vuex-asr?")]),t._v(" "),a("p",[t._v("Vuex-asr removes the necessity to describe your vuex store bindings in the component's script. With vuex-asr you're able to bind "),a("router-link",{attrs:{to:"/step-by-step-guide/hello-world-example.html"}},[t._v("state")]),t._v(", "),a("router-link",{attrs:{to:"/step-by-step-guide/getters-example.html"}},[t._v("getters")]),t._v(", "),a("router-link",{attrs:{to:"/step-by-step-guide/mutations.html"}},[t._v("mutations")]),t._v(" and "),a("router-link",{attrs:{to:"/step-by-step-guide/actions.html"}},[t._v("actions")]),t._v(" from the component's attributes\\directives:")],1),t._v(" "),a("ul",[a("li",[t._v("asr-bind-state")]),t._v(" "),a("li",[t._v("asr-bind-getters")]),t._v(" "),a("li",[t._v("asr-bind-mutations")]),t._v(" "),a("li",[t._v("asr-bind-actions")])]),t._v(" "),a("p",[t._v("The plugin automatically resolves  bindings and is able to map them from the component's attributes, allowing your component's code to become "),a("strong",[t._v("generic")]),t._v(" and "),a("strong",[t._v("independent")]),t._v(" from the Vuex store 😎.")]),t._v(" "),a("p",[t._v("vuex-asr provides full interactivity with vuex.")]),t._v(" "),a("h3",{attrs:{id:"install"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[t._v("#")]),t._v(" install")]),t._v(" "),a("p",[t._v("You can install the package via NPM:")]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" vuex-asr\n")])])]),a("h4",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup","aria-hidden":"true"}},[t._v("#")]),t._v(" setup")]),t._v(" "),a("p",[t._v("In your (typically) main.js:")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" App "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./App.vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Store "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./vuex/store"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VuexASR "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vuex-asr"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nVue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("VuexASR"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Store\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#app"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("and you're ready to use vuex-asr.")]),t._v(" "),a("h3",{attrs:{id:"simple-example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-example","aria-hidden":"true"}},[t._v("#")]),t._v(" simple example")]),t._v(" "),a("p",[t._v("Assume you have a vuex store:")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vuex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"This is a message in the Root of VUEX"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("With "),a("code",[t._v("asr-bind-state")]),t._v(" you could bind the state item "),a("code",[t._v("message")]),t._v(" like this:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("message-component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[t._v("If you have your state item in a "),a("code",[t._v("namespace")]),t._v(" you could bind it like this:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("message-component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("User/Settings/message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[t._v("If you have to "),a("code",[t._v("alias")]),t._v(" your state item to match components name convention:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("message-component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("User/Settings/notifyMessage AS message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[t._v("This will bind the the state item "),a("code",[t._v("notifyMessage")]),t._v(", living in the namespace "),a("code",[t._v("User/Settings")]),t._v(", AS "),a("code",[t._v("message")]),t._v(" to the "),a("code",[t._v("<message-component>")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v("// MessageComponent.vue\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("    \n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("some-markup"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        {{ message }}\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("about reactivity")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("User/Settings/notifyMessage")]),t._v(" updates in the store, the "),a("code",[t._v("message")]),t._v(" in "),a("code",[t._v("<message-component>")]),t._v(" will update too.")])]),t._v(" "),a("h3",{attrs:{id:"a-more-complex-implementation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#a-more-complex-implementation","aria-hidden":"true"}},[t._v("#")]),t._v(" a more complex implementation")]),t._v(" "),a("p",[t._v("We could also use it to provide more complex components with store bindings:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v("    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("some-component")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("\n        message, \n        USER/userObject AS user,\n        PHOTOS/recentPhotos\n        PHOTOS/likedPhotos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-getters")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("\n        PHOTOS/recentPhotos\n        PHOTOS/likedPhotos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-mutations")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("\n        USER/setMessageUser\n        PHOTOS/addNewPhoto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-actions")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("\n        PHOTOS/fetchNewPhotos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("some-component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("In this case we bind "),a("router-link",{attrs:{to:"/step-by-step-guide/hello-world-example.html"}},[t._v("state")]),t._v(", "),a("router-link",{attrs:{to:"/step-by-step-guide/getters-example.html"}},[t._v("getters")]),t._v(", "),a("router-link",{attrs:{to:"/step-by-step-guide/mutations.html"}},[t._v("mutations")]),t._v(" and "),a("router-link",{attrs:{to:"/step-by-step-guide/actions.html"}},[t._v("actions")]),t._v(" items to "),a("code",[t._v("<some-component>")]),t._v(".")],1),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("get familiar with the concepts")]),t._v(" "),a("p",[a("router-link",{attrs:{to:"/step-by-step-guide/hello-world-example.html"}},[t._v("hello world example")]),t._v(".")],1)]),t._v(" "),a("h2",{attrs:{id:"update"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update","aria-hidden":"true"}},[t._v("#")]),t._v(" Update")]),t._v(" "),a("p",[t._v("30-12-2019: overwrite local variables with store bindings! Documentation will be updated soon with examples.")]),t._v(" "),a("p",[t._v("15-01-2019: update with some refactoring for better control flow, the "),a("code",[t._v("test-suite/views/Sandbox.vue")]),t._v(" contains an example on how to overwrite data function properties.")]),t._v(" "),a("p",[t._v("The binding "),a("code",[t._v("message")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v("        "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("example-message")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("asr-bind-state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[t._v("Will overwite 'message' in the returned object in data and leaves the other attributes in it:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v('    // src/components/ExampleMessage.vue\n\n    ...\n           data() {\n             return {\n               message: "local Message",\n               firstName: "local firstName",\n               lastName: "local lastName",\n               somethingElse: "jahoeee, this is it!",\n             }\n           },\n    ...\n')])])])])}),[],!1,null,null,null);s.default=n.exports}}]);