Skip to content

Instantly share code, notes, and snippets.

@guiliredu

guiliredu/Annotations.md

Last active July 26, 2019 18:22
Show Gist options
  • Save guiliredu/1910f8382ca27d98b206d6862ca0ec9b to your computer and use it in GitHub Desktop.
Save guiliredu/1910f8382ca27d98b206d6862ca0ec9b to your computer and use it in GitHub Desktop.
Download ZIP
VueX Studies
Raw
app.js
import Vue from 'vue'
import { store } from './store/store'
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
Raw
App.vue
<template>
<div id="app">
<div>
<label for="flavor">Favorite ice cream flavor: {{ $store.getters.flavor }}</label>
<input name="flavor" @input="changed">
</div>
</div>
</template>
<script>
import Form from './components/Form'
import Display from './components/Display'
export default {
name: 'App',
methods: {
changed: function(event) {
this.$store.commit('change', event.target.value)
}
}
}
</script>
Raw
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
flavor: ''
},
mutations: {
change(state, flavor) {
state.flavor = flavor
}
},
getters: {
flavor: state => state.flavor
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment