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

Question

我试图维护从我的数据对象派生的状态，并在刷新页面时维护该状态。 api 通过 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>

我正在尝试使用 vuex 和 createPersistedState 将数据保存到本地存储。 我可以在 devtools 的应用程序部分看到空的 beerView 对象，但没有提交任何内容，刷新页面时我丢失了所有数据。

 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

您可以尝试使用本地存储。 要设置一个项目，您可以使用：

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

注意：如果您希望该值为 JSON 或对象，则必须在 JSON 或对象上使用 JSON.stringify，当您获得该值时，您可以

要获得物品，您可以使用：

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

要删除项目，您可以使用：

localStorage.removeItem('favoriteflavor');

您可以在开发工具中查看本地存储。 打开开发工具，然后转到应用程序-->本地存储-->[生成数据的域]，然后您可以看到键和值，您可以对其进行编辑。

注意：这也适用于普通 js。 可能有一种方法可以为 vue 做到这一点，但我对 Vuex 了解不多