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 }
        })
    }
}

router.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 默认不持久化数据。 你可以使用这个包https://github.com/robinvdvleuten/vuex-persistedstate 它通过将数据存储在本地存储中来持久化数据。

但是，如果您在 ssr/universal 模式下使用它，则需要进一步调整以使其正常工作，您可以关注此问题线程。