Skip to content

Instantly share code, notes, and snippets.

@meredevelopment
Last active March 5, 2018 13:21
Show Gist options
  • Save meredevelopment/625b1884fe882edf573e2df289d936cb to your computer and use it in GitHub Desktop.
Save meredevelopment/625b1884fe882edf573e2df289d936cb to your computer and use it in GitHub Desktop.
Benjamin doesn't understand scope...
<template>
<div id="app">
<ComponentOne/>
</div>
</template>
<script>
import {store} from './store.js'
import ComponentOne from './ComponentOne'
export default {
name: 'App',
data: function () {
return {
sharedState: store.state
}
},
components: {
ComponentOne,
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div>
<h2>{{ sharedState.msg }}</h2>
<input type="button" value="Set sharedState.msg" v-on:click.prevent="sharedState.msg = 'Message set directly from first button'">
<input type="button" value="Fire storeFunctionMethod" v-on:click.prevent="storeFunctionMethod('Message set from second button via storeFunctionMethod')">
<input type="button" value="Fire store.storeFunction" v-on:click.prevent="store.storeFunction('Message set from third button via store.storeFunction')">
</div>
</template>
<script>
import {store} from './store.js'
export default {
name: 'ComponentOne',
data(){
return {
sharedState: store.state
}
},
methods: {
storeFunctionMethod(val) {
store.storeFunction(val)
}
},
mounted() {
store.storeFunction("Message set when ComponentOne mounted")
}
}
</script>
<style>
</style>
import Vue from 'vue'
import App from './App'
import {store} from './store.js'
Vue.config.productionTip = true
new Vue({
el: '#app',
components: {
App
},
data: {
sharedState: store.state
},
template: '<App/>'
})
export const store = {
state: {
msg: '',
},
storeFunction: function (inp) {
console.log("Fired storeFunction: "+inp)
this.state.msg = inp
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment