Use in a basic way vuex

src/App.vue

@@ -1,13 +1,12 @@
 <template>
 	<div id='app'>
-		<modal-window v-model='loginSignupModalVisible'>
-			<tab-view :tabs='["Sign up", "Login"]'>
+		<modal-window name='account'>
+			<tab-view :tabs='["Sign up", "Login"]' name="account">
 				<template slot='first'>
 					<p style='margin-top: 0;'>
 						Sign up to create and post in threads.
 						<br/>It only takes a few seconds
 					</p>
-					{{signup.username}}
 					<fancy-input
 						v-model='signup.username'
 						placeholder='Username'
@@ -28,7 +27,7 @@
 						width='100%'
 					>
 					</fancy-input>
-					<button class='button'>
+					<button class='button' @click='signup'>
 						Sign up
 					</button>
 					<button class='button' @click='cancel'>
@@ -36,24 +35,40 @@
 					</button>
 				</template>
 				<template slot='second'>
-					text 2<br/>
-					text 2<br/>
-					text 2<br/>
-					text 2<br/>
-					text 2<br/>
-					text 2<br/>
+					<p style='margin-top: 0;'>
+						Login to create and post in threads.
+					</p>
+					<fancy-input
+						v-model='login.username'
+						placeholder='Username'
+						width='100%'
+					>
+					</fancy-input>
+					<fancy-input
+						v-model='login.password'
+						placeholder='Password'
+						type='password'
+						width='100%'
+					>
+					</fancy-input>
+					<button class='button' @click='signup'>
+						Log in
+					</button>
+					<button class='button' @click='cancel'>
+						Cancel
+					</button>
 				</template>
 			</tab-view>
 		</modal-window>
 		<header class='header'>
 			<div class='header__group'>
-				<div class='logo'>{{meta.name}}</div>
+				<div class='logo'>{{metaName}}</div>
 			</div>
 			<div class='header__group'>
-				<div class='button button--green' @click='showLoginSignupModal("signup")'>
+				<div class='button button--green' @click='showAccountModal(0)'>
 					Sign up
 				</div>
-				<div class='button' @click='showLoginSignupModal("login")'>
+				<div class='button' @click='showAccountModal(1)'>
 					Login
 				</div>
 				<div class='search' tabindex='0'>
@@ -67,12 +82,12 @@
 </template>
 
 <script>
-window.MODAL_TAB = 0;
-
 	import ModalWindow from './components/ModalWindow'
 	import TabView from './components/TabView'
 	import FancyInput from './components/FancyInput'
 
+	import mapGetters from 'vuex'
+
 	export default {
 		name: 'app',
 		components: {
@@ -82,24 +97,36 @@ window.MODAL_TAB = 0;
 		},
 		data () {
 			return {
-				meta: {
-					name: 'Forum'
-				},
 				signup: {
 					username: '',
 					password: '',
 					confirmPassword: ''
 				},
-				loginSignupModalVisible: false
+				login: {
+					username: '',
+					password: ''
+				}
+			}
+		},
+		computed: {
+			metaName () {
+				return this.$store.state.meta.name
 			}
 		},
 		methods: {
-			showLoginSignupModal (tab) {
-				//TODO: show different tab depending on button
-
-				this.loginSignupModalVisible = true;
+			showAccountModal (index) {
+				this.$store.commit('showModal', 'account');
+				this.$store.commit({
+					type: 'setTab',
+					tab: 'account',
+					index: index
+				});
 			},
 			cancel () {
+				this.$store.commit('hideModal', 'account');
+			},
+			signup () {
+				this.$store.commit('hideModal', 'account');
 			}
 		}
 	}

src/components/ModalWindow.vue

@@ -9,22 +9,16 @@
 <script>
 	export default {
 		name: 'ModalWindow',
-		props: ['value'],
-		data () {
-			return {
-				showModal: this.value
-			}
-		},
+		props: ['name'],
 		methods: {
 			hideModal () {
-				this.showModal = false;
-				this.$emit('input', this.showModal)
+				this.$store.commit('hideModal', this.name);
 			}
 		},
-		mounted () {
-			this.$watch('value', function(newVal) {
-				this.showModal = newVal;
-			});
+		computed: {
+			showModal () {
+				return this.$store.state.modals[this.name];
+			}
 		}
 	}
 </script>

src/components/TabView.vue

@@ -1,28 +1,34 @@
 <template>
 	<div class='tab_view'>
 		<div class='tab_view__tabs'>
-			<div class='tab_view__tab' :class='{"tab_view__tab--selected": showTab === 0}' @click='changeTab(0)'>{{tabs[0]}}</div>
-			<div class='tab_view__tab' :class='{"tab_view__tab--selected": showTab === 1}' @click='changeTab(1)'>{{tabs[1]}}</div>
+			<div class='tab_view__tab' :class='{"tab_view__tab--selected": tabIndex === 0}' @click='changeTab(0)'>{{tabs[0]}}</div>
+			<div class='tab_view__tab' :class='{"tab_view__tab--selected": tabIndex === 1}' @click='changeTab(1)'>{{tabs[1]}}</div>
 		</div>
 		<div class='tab_view__content'>
-			<slot name='first' v-if='showTab === 0'></slot>
-			<slot name='second' v-if='showTab === 1'></slot>
+			<slot name='first' v-if='tabIndex === 0'></slot>
+			<slot name='second' v-if='tabIndex === 1'></slot>
 		</div>
 	</div>
 </template>
 
 <script>
+	import mapGetters from 'vuex';
+
 	export default {
 		name: 'TabView',
-		props: ['tabs'],
-		data () {
-			return {
-				showTab: 0
-			}
-		},
+		props: ['tabs', 'name'],
 		methods: {
 			changeTab (index) {
-				this.showTab = index;
+				this.$store.commit({
+					type: 'setTab',
+					tab: 'account',
+					index: index
+				});
+			}
+		},
+		computed: {
+			tabIndex () {
+				return this.$store.state.tabs[this.name];
 			}
 		}
 	}

src/main.js

@@ -7,7 +7,6 @@ import store from './store/index'
 import Index from './components/routes/Index'
 
 Vue.use(VueRouter)
-Vue.use(Vuex)
 
 const router = new VueRouter({
 	routes: [

src/store/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import index from './modules/index'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state: {
+		meta: {
+			name: 'Forum'
+		},
+		tabs: {
+			account: 0
+		},
+		modals: {
+			account: false
+		}
+	},
+	mutations: {
+		setTab (state, payload) {
+			state.tabs[payload.tab] = payload.index;
+		},
+		showModal (state, modal) {
+			state.modals[modal] = true;
+		},
+		hideModal (state, modal) {
+			state.modals[modal] = false;
+		}
+	}
+})

src/store/modules/index.js

@@ -0,0 +1,14 @@
+const state = {}
+
+const getters = {}
+
+const actions = {}
+
+const mutations = {}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}

src/store/mutations.js

@@ -1,12 +0,0 @@
-import Vuex from 'vuex'
-
-import * as actions from './actions'
-import * as getters from './getters'
-
-export default new Vuex.Store({
-	actions,
-	getters,
-	modules: {
-
-	}
-})