Add vuex mutations and state to change and store selected category

src/components/routes/Index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class='index'>
 		<div class='thread_sorting'>
-			<select-button style='margin-right: 1rem' v-model='selected' :options='categories'></select-button>
+			<select-button style='margin-right: 1rem' v-model='selectedCategory' :options='categories'></select-button>
 			<div class='button button--orange'>New</div>
 			<div class='button'>Most active</div>
 			<div class='button'>No replies</div>
@@ -48,7 +48,7 @@
 		},
 		data () {
 			return {
-				selectedCategory: null
+			
 			}
 		},
 		computed: {
@@ -57,6 +57,14 @@
 			},
 			categories () {
 				return this.$store.state.meta.categories
+			},
+			selectedCategory: {
+				get () {
+					return this.$store.state.index.selectedCategory;
+				},
+				set (category) {
+					this.$store.commit('selectCategory', category);
+				}
 			}
 		}
 	}

src/store/modules/index.js

@@ -1,18 +1,23 @@
 const state = {
+	selectedCategory: 0,
 	threads: [
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), replies: 30}
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30}
 	]
 }
 
@@ -20,7 +25,11 @@ const getters = {}
 
 const actions = {}
 
-const mutations = {}
+const mutations = {
+	selectCategory (state, category) {
+		state.selectedCategory = category;
+	}
+}
 
 export default {
 	state,