Vuex getter 數據在刷新時消失

Question

我正在使用“getter”從我的 Vuex 商店獲取覆蓋組件的數據。 當用戶單擊路由器鏈接時，我將參數中的報價 ID 傳遞給子組件，然后 getter 使用該 ID 從商店中獲取特定報價。

一切都很好，直到我刷新頁面時使用消失的數據。

帶有路由器鏈接的組件：

<v-row>
    <v-col v-for="(quote, $index) in quotes" :key="$index" cols="3">
        <v-card @click="openQuoteEditor(quote)">
            <v-card-title>{{ quote.projectName }}</v-card-title>
        </v-card>
    </v-col>
</v-row>

openQuoteEditor 方法：

methods: {
    openQuoteEditor(quote) {
        this.$router.push({
            name: "QuoteEditor",
            params: { id: quote.uid }
        })
    }
}

路由器.js：

   {
        path: "/all-quotes",
        name: "AllQuotes",
        component: () => import("../views/AllQuotes.vue"),
        children: [
            {
                path: "quote/:id",
                name: "QuoteEditor",
                component: () => import("../components/QuoteEditor.vue")
            }
        ]
    }

Vuex store.js：

getters: {
    getQuote(state) {
        return id => {
            for (const quote of state.quotesCollection.quotesCollection) {
                if (quote.uid == id) {
                    return quote
                }
            }
        }
    }
}

組件JS：

import { mapGetters } from "vuex"

export default {
    data() {
        return {
            name: "QuoteEditor"
        }
    },
    props: ["id"],
    computed: {
        ...mapGetters(["getQuote"]),
        quote() {
            return this.getQuote(this.$route.params.id)
        }
    }
}

任何幫助都將是超級的！ 謝謝！

Answer 1

Vuex 默認不持久化數據。 您可以使用這個 package https://github.com/robinvdvleuten/vuex-persistedstate通過將數據存儲在本地存儲中來持久化數據。

但是，如果您在 ssr/universal 模式下使用它，則需要進一步調整以使其正常工作，您可以關注此問題線程。