Generally move from vuex to component data and clear things up

src/App.vue

@@ -65,10 +65,10 @@
 				<div class='logo' @click='$router.push("/")'>{{name}}</div>
 			</div>
 			<div class='header__group'>
-				<div class='button button--green' @click='setShowAccountModal(0)'>
+				<div class='button button--green' @click='showAccountModalTab(0)'>
 					Sign up
 				</div>
-				<div class='button' @click='setShowAccountModal(1)'>
+				<div class='button' @click='showAccountModalTab(1)'>
 					Login
 				</div>
 				<div class='search' tabindex='0'>
@@ -113,33 +113,25 @@
 				return this.$store.state.meta.name
 			},
 			showAccountModal: {
-				get () { return this.$store.state.modals.account },
+				get () { return this.$store.state.accountModal },
 				set (val) {
-					this.$store.commit('hideModal', 'account');
+					this.$store.commit('setAccountModalState', val);
 				}
 			},
 			showAccountTab : {
-				get (val) { return this.$store.state.tabs.account },
-				set (index) {
-					this.$store.commit({
-						type: 'setTab',
-						tab: 'account',
-						index: index
-					});
-				}
+				get (val) { return this.$store.state.accountTabs },
+				set (index) { this.$store.commit('setAccountTabs', index) }
 			}
 		},
 		methods: {
-			setShowAccountModal (index) {
-				this.$store.commit('showModal', 'account');
+			showAccountModalTab (index) {
+				this.showAccountModal = true
 				this.showAccountTab = index
 			},
 			cancel () {
-				this.$store.commit('hideModal', 'account');
+				this.showAccountModal = false
 			},
-			signup () {
-				this.$store.commit('hideModal', 'account');
-			}
+			signup () {}
 		}
 	}
 </script>

src/components/SelectOptions.vue

@@ -3,7 +3,7 @@
 		<button
 			v-for='option in options'
 			class='button'
-			:class='{"button--orange": option.value === selected}'
+			:class='{"button--orange": option.value === value}'
 			@click='select(option.value)'
 		>
 			{{option.name}}
@@ -14,24 +14,10 @@
 <script>
 	export default {
 		name: 'SelectOptions',
-		props: ['name', 'options'],
-		computed: {
-			selected: {
-				get () {
-					return this.$store.state.selectOptions[this.name];
-				},
-				set (val) {
-					this.$store.commit({
-						type: 'setSelectOptions',
-						name: this.name,
-						value: val
-					});
-				}
-			}
-		},
+		props: ['value', 'options'],
 		methods: {
 			select (index) {
-				this.selected = index;
+				this.$emit('input', index)
 			}
 		}
 	}

src/components/routes/Admin.vue

@@ -19,21 +19,36 @@
 <script>
 	export default {
 		name: 'index',
-		components: {},
-		computed: {
-			menuItems () {
-				return this.$store.state.admin.menuItems
-			},
-			selected () {
-				return this.$store.state.admin.selected
+		data () {
+			return {
+				menuItems: [
+					{ name: 'Dashboard', route: 'dashboard' }, 
+					{ name: 'Settings', route: 'settings' },
+					{ name: 'Users', route: 'users' }
+				],
+				selected: 0
 			}
 		},
-		mounted () {
-			this.$store.commit('setMenuItem', this.$route.path.split('/')[2])
-		},
 		watch: {
 			$route (to, from) {
-				this.$store.commit('setMenuItem', to.path.split('/')[2])
+				this.selected = this.getIndexFromRoute(to.path)
+			}
+		},
+		mounted () {
+			this.selected = this.getIndexFromRoute(this.$route.path)
+		},
+		methods: {
+			getIndexFromRoute (path) {
+				let selectedIndex
+				let route = path.split('/')[2]
+
+				this.menuItems.forEach((item, index) => {
+					if(item.route === route) {
+						selectedIndex = index
+					}
+				})
+
+				return selectedIndex
 			}
 		}
 	}

src/components/routes/Category.vue

@@ -3,7 +3,7 @@
 		<div class='thread_sorting'>
 			<div>
 				<select-button style='margin-right: 1rem' v-model='selectedCategory' :options='categories'></select-button>
-				<select-options :options='options' name='filterOptions'></select-options>
+				<select-options :options='filterOptions' v-model='selectedFilterOption'></select-options>
 			</div>
 			<button class='button' @click='$router.push("/thread/new")'>Post new thread</button>
 		</div>
@@ -23,7 +23,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr class='thread' v-for='thread in threads' @click='navigateToThread(thread.slug, thread.id)'>
+				<tr class='thread' v-for='thread in filteredThreads' @click='navigateToThread(thread.slug, thread.id)'>
 					<td>{{thread.title}}</td>
 					<td>
 						<div>{{thread.latestPostUser}}</div>
@@ -32,7 +32,7 @@
 					<td>{{thread.category}}</td>
 					<td>{{thread.replies}}</td>
 				</tr>
-				<tr class='thread' v-if='!threads.length' colspan='4'>
+				<tr class='thread' v-if='!filteredThreads.length' colspan='4'>
 					<td colspan='4' class='thread--empty'>No threads or posts.</td>
 				</tr>
 			</tbody>
@@ -54,28 +54,81 @@
 		},
 		data () {
 			return {
-				options: [
+				filterOptions: [
 					{name: 'New', value: 'NEW'},
 					{name: 'Most active', value: 'MOST_ACTIVE'},
 					{name: 'No replies', value: 'NO_REPLIES'}
 				],
-				selected: null
+				selectedFilterOption: 'NEW',
+				selectedCategory: this.$route.params.category.toUpperCase(),
+				threads: [
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
+					{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'}
+					
+				]
 			}
 		},
 		computed: {
-			threads () {
-				return this.$store.getters.filteredThreads;
+			filteredThreads () {
+				var categories = {};
+				var filter = this.selectedFilterOption
+
+				this.$store.state.meta.categories.forEach(category => {
+					categories[category.value] = category.name;
+				});
+
+				return this.threads.filter(thread => {
+					return (thread.category === this.selectedCategory) || (this.selectedCategory === 'ALL');
+				}).map(thread => {
+					var _thread = Object.assign({}, thread);
+					_thread.category = categories[thread.category];
+
+					return _thread;
+				}).sort((a, b) => {
+					if(filter === 'NEW') {
+						return a.latestPostDate - b.latestPostDate;
+					} else if(filter === 'MOST_ACTIVE') {
+						return b.replies - a.replies;
+					}
+				}).filter(thread => {
+					if(filter === 'NO_REPLIES') {
+						return !thread.replies;
+					} else {
+						return true;
+					}
+				});
 			},
 			categories () {
 				return this.$store.state.meta.categories
-			},
-			selectedCategory: {
-				get () {
-					return this.$store.state.category.selectedCategory;
-				},
-				set (category) {
-					this.$store.commit('selectCategory', category);
-				}
 			}
 		},
 		methods: {
@@ -87,9 +140,6 @@
 			selectedCategory (newValue) {
 				this.$router.push('/category/' + newValue.toLowerCase());
 			}
-		},
-		mounted () {
-			this.selectedCategory = this.$route.params.category.toUpperCase();
 		}
 	}
 </script>

src/components/routes/Thread.vue

@@ -17,7 +17,7 @@
 		<input-editor
 			v-model='editor'
 			:float='true'
-			:show='editorVisible'
+			:show='editorState'
 			:replyUsername='replyUsername'
 			v-on:close='hideEditor'
 			v-on:submit='addPost'
@@ -65,31 +65,19 @@
 				return this.$store.state.thread.reply.username
 			},
 			editor: {
-				get () { return this.$store.state.editors.thread.value },
+				get () { return this.$store.state.thread.editor.value },
 				set (val) {
-					this.$store.commit({
-						type: 'setEditor',
-						name: 'thread',
-						value: val
-					})
+					this.$store.commit('setThreadEditorValue', val)
 				}
 			},
-			editorVisible () { return this.$store.state.editors.thread.visible }
+			editorState () { return this.$store.state.thread.editor.show }
 		},
 		methods: {
 			showEditor () {
-				this.$store.commit({
-					type: 'showEditor',
-					name: 'thread',
-					value: true
-				});
+				this.$store.commit('setThreadEditorState', true);
 			},
 			hideEditor () {
-				this.$store.commit({
-					type: 'showEditor',
-					name: 'thread',
-					value: false
-				});
+				this.$store.commit('setThreadEditorState', false);
 				this.clearReply()
 			},
 			clearReply () {

src/components/routes/ThreadNew.vue

@@ -21,22 +21,13 @@
 		},
 		data () {
 			return {
-				selectedCategory: this.$store.state.category.selectedCategory
+				selectedCategory: this.$store.state.category.selectedCategory,
+				editor: ''
 			}
 		},
 		computed: {
 			categories () {
 				return this.$store.getters.categoriesWithoutAll
-			},
-			editor: {
-				get () { return this.$store.state.editors['new-thread'].value },
-				set (val) {
-					this.$store.commit({
-						type: 'setEditor',
-						name: 'new-thread',
-						value: val
-					})
-				}
 			}
 		},
 		methods: {}

src/store/index.js

@@ -1,10 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import index from './modules/index'
-import category from './modules/category'
 import thread from './modules/thread'
-import admin from './modules/admin'
 
 Vue.use(Vuex)
 
@@ -20,29 +17,9 @@ export default new Vuex.Store({
 				{name: 'Books', value: 'BOOKS'}
 			]
 		},
-		tabs: {
-			account: 0,
-			thread: 0,
-			'new-thread': 0
-		},
-		selectOptions: {
-			filterOptions: 'NEW'
-		},
-		modals: {
-			account: false,
-			'thread_editor--picture': false,
-			'thread_editor--link': false
-		},
-		editors: {
-			thread: {
-				value: '',
-				visible: false
-			},
-			'new-thread': {
-				value: '',
-				visible: true
-			}
-		}
+		accountTabs: 0,
+		accountModal: false,
+		username: 'John Doe'
 	},
 	getters: {
 		categoriesWithoutAll (state) {
@@ -57,29 +34,15 @@ export default new Vuex.Store({
 		}
 	},
 	mutations: {
-		setTab (state, payload) {
-			state.tabs[payload.tab] = payload.index;
-		},
-		setEditor (state, payload) {
-			state.editors[payload.name].value = payload.value;
-		},
-		showEditor (state, payload) {
-			state.editors[payload.name].visible = payload.value;
+		setAccountTabs (state, index) {
+			state.accountTabs = index;
 		},
 		setSelectOptions (state, payload) {
 			state.selectOptions[payload.name] = payload.value;
 		},
-		showModal (state, modal) {
-			state.modals[modal] = true;
-		},
-		hideModal (state, modal) {
-			state.modals[modal] = false;
+		setAccountModalState (state, value) {
+			state.accountModal = value;
 		}
 	},
-	modules: {
-		index,
-		category,
-		thread,
-		admin
-	}
+	modules: { thread }
 })

src/store/modules/admin.js

@@ -1,29 +0,0 @@
-const state = {
-	menuItems: [
-		{ name: 'Dashboard', route: 'dashboard' }, 
-		{ name: 'Settings', route: 'settings' },
-		{ name: 'Users', route: 'users' }
-	],
-	selected: 0
-}
-
-const getters = {}
-
-const actions = {}
-
-const mutations = {
-	setMenuItem (state, route) {
-		state.menuItems.forEach((item, index) => {
-			if(item.route === route) {
-				state.selected = index
-			}
-		})
-	}
-}
-
-export default {
-	state,
-	getters,
-	actions,
-	mutations
-}

src/store/modules/category.js

@@ -1,84 +0,0 @@
-const state = {
-	selectedCategory: 'ALL',
-	threads: [
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'},{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 10, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 5, id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 23,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 40,  id: 1, slug: 'test'},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 0,  id: 1, slug: 'test'}
-		
-	]
-}
-
-const getters = {
-	filteredThreads (state, getters, rootState) {
-		var categories = {};
-		var filter = rootState.selectOptions.filterOptions;
-
-		rootState.meta.categories.forEach(category => {
-			categories[category.value] = category.name;
-		});
-
-		return state.threads.filter(thread => {
-			return (thread.category === state.selectedCategory) || (state.selectedCategory === 'ALL');
-		}).map(thread => {
-			var _thread = Object.assign({}, thread);
-			_thread.category = categories[thread.category];
-
-			return _thread;
-		}).sort((a, b) => {
-			if(filter === 'NEW') {
-				return a.latestPostDate - b.latestPostDate;
-			} else if(filter === 'MOST_ACTIVE') {
-				return b.replies - a.replies;
-			}
-		}).filter(thread => {
-			if(filter === 'NO_REPLIES') {
-				return !thread.replies;
-			} else {
-				return true;
-			}
-		});
-	}
-}
-
-const actions = {}
-
-const mutations = {
-	selectCategory (state, category) {
-		state.selectedCategory = category;
-	}
-}
-
-export default {
-	state,
-	getters,
-	actions,
-	mutations
-}

src/store/modules/index.js

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