vuex tutorial 2019

1<template>
2    <span>
3        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>
4            <v-list>
5                <template v-for="(item, index) in items">
6                    <v-list-tile :key="index">
7                        <v-list-tile-content>
8                            {{item.title}}
9                        </v-list-tile-content>
10                    </v-list-tile>
11                    <v-divider :key="`divider-${index}`"></v-divider>
12                </template>
13            </v-list>
14        </v-navigation-drawer>
15        <v-toolbar app color="brown darken-4" dark>
16            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
17            <v-spacer class="hidden-md-and-up"></v-spacer>
18            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
19            <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
20            <v-spacer class="hidden-sm-and-down"></v-spacer>
21            <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
22            <v-btn color="brown lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
23        </v-toolbar>
24    </span>
25</template>
26
27<script>
28export default {
29    name: 'AppNavigation',
30    data() {
31        return {
32            appTitle: 'Meal Prep',
33            drawer: false,
34            items: [
35                { title: 'Menu' },
36                { title: 'Sign In' },
37                { title: 'Join' }
38            ]
39        };
40    }
41};
42</script>
43
44<style scoped>
45</style>

1import Vue from 'vue'
2import Vuex from 'vuex'
3
4Vue.use(Vuex)
5
6const store = new Vuex.Store({
7  state: {
8    count: 0
9  },
10  mutations: {
11    increment (state) {
12      state.count++
13    }
14  }
15})
16