CODEWITHSUNDEEP
javascriptvue.jsvuex
emarchk0
emarchk0

Reputation: 11

Maintaining persistent state when reloading a page using VueJs/Vuex

I am trying to maintain state derived from my data object and maintain that state upon refreshing the page. The api is connected via the filter function in getSpecificBeer().

<template>
  <div class="mx-auto w-50 d-inline-block w-responsive" :adaptive="true" :resizable="true">
    <div class="beerCard">
      <div class="card" >
        <div class="card-body">
          <h3 class="card-title">{{ beer.name }}</h3>
          <h5 class="card-title">{{ beer.brand }}</h5>
          <h5 class="card-title">{{ beer.description }}</h5>
          <h5 class="card-title">{{ beer.ABV }}</h5>
        </div>
      </div>
      <div class="review" style="padding-top: 2em">
        <Review />        
      </div>
    </div>
    
  </div>
  
</template>

<script>
// import { mapActions } from 'vuex'
import Review from '../components/Review.vue';
export default {
  components: { Review },
  name: "BeerView",
  props: ["beerId",'beers'],

  data() {
    return {
      beer: {
        name: '',
        id: '',
        brand: '',
        ABV: '',
        description: ''
      },
    };
  },

  mounted() {
    this.getSpecificBeer()
  },
  
  methods: {    
    getSpecificBeer() {
      this.beer = this.beers.filter((beer) => beer.id == this.$route.params.beerId)[0];
      this.$store.state.setBeerView
      this.$store.commit('setBeerView', this.beerView)
      console.log(this.beerBeerView)
    },    
  }
};
</script>

I am trying to save the data to the local storage utilising vuex and createPersistedState. I can see the empty beerView object in the application section of devtools, but nothing is committed and I loose all the data upon refreshing the page.

const state = {
    beerView: {}
}

const mutations = {
  setBeerView: (state, beerView) => {state.beerView = beerView}
}
export default {
    state,
    mutations
}

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import beerView from './modules/beerView'

Vue.use(Vuex)

const beerViewState = createPersistedState({
  paths: ['beerView']
})

const store = new Vuex.Store({
  modules: {
    beerView
  },
  plugins: [beerViewState]
})

export default store

Upvotes: 0

Views: 735

Answers (1)

Alien10
Alien10

Reputation: 133

You can try to use local storage. To set an item you can use:

localStorage.setItem('key','value');

Note: if you want the value to be JSON or object you would have to use JSON.stringify on the JSON or object and when you get the value you ca

To get an item you can use:

var taste = localStorage.getItem('key');
// value

To remove an item you can use:

localStorage.removeItem('favoriteflavor');

You can view the local storage in the dev tools. Open dev tools and then go to Application-->Local Storage-->[the domain that made the data] and then you can see the keys and values and you can edit them.

Note: This works in normal js too. There is probably a way to do it just for vue but I don't know much about Vuex

Upvotes: 1

Related Questions