使用 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 了解不多