Nuxt.js vuex 存儲未持久化

Question

我的 Nuxt.js 設置有一些奇怪的問題。 Store 中的某些狀態不是持久的，每次我加載另一個視圖時，它們都會返回默認值。

頁面/test.vue

<template>
  <section class="section">
    <b-container>
      <b-row>
        <b-col cols=12>
          <b-button @click="setTest" variant="dark">test</b-button> | {{this.$store.state.test}} |
        </b-col>
      </b-row>
    </b-container>
  </section>
</template>

<script>
export default {
  name: 'test',
  methods: {
    setTest() {
      this.$store.commit("setTest")
    },
  }
}
</script>

存儲/index.js

export const state = () => ({
  test: "test"
})

export const mutations = {
  setTest: (state) => state.test = 'Hello'
}

測試場景是點擊“測試”按鈕，該按鈕使用突變提交“setTest”調用該方法，該方法將 state 設置為“Hello”。 目前它工作正常，但如果我更改視圖或重新加載頁面，state 將設置為默認“測試”。

我究竟做錯了什么？

Answer 1

好吧，所以行為完全是合乎邏輯的。 Vuex 不應該是持久的。

對於前端的任何持久性，您需要：

• cookies
• 本地存儲
• 在 URL 中傳遞它（查詢參數）
• 索引數據庫
• 通過調用后端獲取數據

這里的一些包可能有用： https://github.com/vuejs/awesome-vue#persistence

---

如果您使用 F5 重新加載頁面，您的所有 JS 將被擦除並再次加載。 因此，不會保留 state ，因為它將是一個全新的頁面。 使用前端框架時，您不能期望它只在頁面刷新后才能工作。

當您跟隨href時，同樣的 go 是真正的導航。 您需要做的是使用<nuxt-link></nuxt-link>組件，使用類似於to="/profile"的內容讓 VueJS 移動到這個 URL。

NuxtLink是一個 Nuxt.js 組件，本質上是<router-link></router-link>之上的一個組件，它是Vue 路由器。

TLDR：您不能使用window.location.href類的東西，也不能使用<a href="..." 。 如果您僅使用 VueJS，您可以通過 Nuxt ( nuxt-link ) 或 Vue 的路由器 ( router-link ) 使用給定的組件。

閱讀 Vue 路由器的文檔可能是了解更多內容的良好開端！

---

如果您使用的是nuxt/auth ，請嘗試一下： https://auth.nuxtjs.org/api/storage/#universal-storage