使用 VueJs/Vuex 重新加载页面时保持持久状态

Question

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

Answer 1

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