VueX Studies

Annotations.md

VueX Studies

Official docs: https://vuex.vuejs.org/

Resources:

• https://alligator.io/vuejs/intro-to-vuex/
• https://flaviocopes.com/vuex/
• https://jasonwatmore.com/post/2018/07/14/vue-vuex-user-registration-and-login-tutorial-example
• https://github.com/gothinkster/vue-realworld-example-app/
• https://vueschool.io/courses/vuex-for-everyone

app.js

import Vue from 'vue'

import { store } from './store/store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

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>

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
  }
})