Use showFilters flag already present in the store.

src/components/header/Header.vue

@@ -2,7 +2,7 @@
   <div class="header-container">
     <div class="top-bar">
       <h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>
-      <filter-icon class="icon" v-if="filtersAreHidden" @click="onToggleShowFilters" />
+      <filter-icon class="icon" v-if="!showFilters" @click="onToggleShowFilters" />
       <filter-off-icon class="icon" v-else @click="onToggleShowFilters" />
       <!-- <map-legend-icon class="icon" /> -->
       <help-circle-icon class="icon" v-if="!showLegend" @click="onToggleShowLegend" />
@@ -14,7 +14,7 @@
       />
     </div>
     <div class="charts">
-      <Filters v-if="!filtersAreHidden"/>
+      <Filters v-if="showFilters"/>
       <Legend v-if="showLegend"/>
       <ContextMap class="context-map" />
       <AveragesMap class="averages-map card" />
@@ -50,11 +50,6 @@ export default {
     HelpCircleIcon,
     HelpCircleOutlineIcon
   },
-  data() {
-    return {
-      filtersAreHidden: true
-    }
-  },
   computed: {
     pendingPostRequestsCount() {
       return this.$store.getters.pendingPostRequestsCount
@@ -62,6 +57,9 @@ export default {
     hasUncommitedChanges() {
       return this.$store.getters.hasUncommitedChanges
     },
+    showFilters() {
+      return this.$store.getters.showFilters
+    },
     showLegend() {
       return this.$store.getters.showLegend
     }
@@ -71,7 +69,7 @@ export default {
       this.$store.dispatch('commitChangesToDisk')
     },
     onToggleShowFilters() {
-      this.filtersAreHidden = !this.filtersAreHidden
+      this.$store.dispatch('setShowFilters', !this.showFilters)
     },
     onToggleShowLegend() {
       this.$store.dispatch('setShowLegend', !this.showLegend)