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 不太了解

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

1 个答案: