title: How to save "state" variables to the browser localStorage using Vue.js + Vuex (createStore)
body: <p>I am trying to load (using <code>mounted()</code>) and save (with the <code>watch: {...}</code> method) to / from the localStorage.</p>
  <p>The two variables i am trying to save to the localstorage are 'categories' and 'locations'.</p>
  <p>I just cannot get it triggered for some reason. I have never done this using vue.js/vuex.</p>
  <p>all examples I have found use the <code>data: {}</code> object in &quot;regular&quot; components. In my example I am trying to load and save to the state variables.
  Please help. I have pasted the whole vuex <code>createStore</code> object (<em>project/src/store/index.js</em>):</p>
  <pre><code>import { createStore } from 'vuex'
  
  export default createStore({
      state: {
          categories: [ &quot;Food&quot;, &quot;Bars&quot;, &quot;Parks&quot;],
          locations: [],
      },
      mutations: {
          addCategory(state, newCategory) {
              state.categories.push(newCategory)
          }, 
          removeCategory(state, i) {
              state.categories.splice(i, 1);
          }, 
          saveCategory(state, data) {
              state.categories[data.item] = data.text
          }, 
          addLocation(state, data) {
              state.locations.push(data)
          },
          deleteLocation(state, i) {
              state.locations.splice(i, 1);
          }, 
          saveLocation(state, data) {
              state.locations[data.index].categories = data.item
          },
  
      },
      watch:{
          categories(newCategories) {
              console.log(newCategories)
              localStorage.categories = JSON.stringify(newCategories)
          }, 
          locations(newLocations) {
              console.log(newLocations)
              localStorage.locations = JSON.stringify(newLocations)
          }
      },
      actions: {
      },
      modules: {
      }, 
      mounted() {
          console.log(localStorage.categories)
          console.log(localStorage.locations)
          if (localStorage.categories) {
              this.categories = JSON.parse(localStorage.categories)
              if (localStorage.locations) 
                  this.locations = JSON.parse(localStorage.locations)
          }
  
      }
  })
  </code></pre>
  <p>Edit:</p>
  <p>tried:</p>
  <pre><code>&quot;state.categories&quot; (newCategories) {
      console.log(newCategories)
      localStorage.categories = JSON.stringify(newCategories)
  }, 
  &quot;state.locations&quot; (newLocations) {
      console.log(newLocations)
      localStorage.locations = JSON.stringify(newLocations)
  }
  </code></pre>
  <p>no errors but doesn't work.</p>