Make deep clone of resources, access state by getter

components/Sidebar.vue

@@ -20,7 +20,7 @@ export default {
   },
   computed: {
     cardsShown() {
-      return this.$store.state.Sidebar.cardsShown;
+      return this.$store.getters['Sidebar/isCardsShown']
     }
   },
   created() {

pages/_category.vue

@@ -25,17 +25,16 @@ export default {
   },
   computed: {
     cardsShown() {
-      return this.$store.state.Sidebar.cardsShown;
+      return this.$store.getters['Sidebar/isCardsShown']
     },
     category() {
       const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
       const pagePath = this.$router.history.current.path
       const query = this.$route.query.card
-      // console.log(category.resources)
+      const clone = JSON.parse(JSON.stringify(category))
-      for (const resource of category.resources) {
+      for (const resource of clone.resources) {
-        resource.active = (resource.cleanTitle === query) ? 'card--active' : ''
+        resource.active = resource.cleanTitle === query ? 'card--active' : ''
       }
-      // category.resources.sort(this.compareTitles)
 			return category
     },
   },

store/Sidebar.js

@@ -2,6 +2,10 @@ export const state = () => ({
   cardsShown: true
 })
 
+export const getters = {
+  isCardsShown: state => state.cardsShown
+}
+
 export const mutations = {
   toggleCardsShown(state) {
     console.log(state.cardsShown)

store/data.js

@@ -61,10 +61,10 @@ export const getters = {
 	},
 	sortByTitle: (_, getters) => title => {
 		const category = getters.findResources(title)
-		const copy = [...category.resources]
+		const clone = [...category.resources]
 		return {
 			...category,
-			resources: copy.sort(compareTitles)
+			resources: clone.sort(compareTitles)
 		}
 	}
 }