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”的方法，将状态设置为“Hello”。目前它工作正常，但如果我更改视图或重新加载页面，状态将设置为默认“测试”。

我究竟做错了什么？

Answer 1

好吧，所以这种行为完全符合逻辑。Vuex/Pinia 不应该是持久的。

对于前端的任何持久性，您需要：

• 饼干
• 本地存储
• 将其传递到 URL（查询参数）
• 索引数据库
• 通过调用后端获取数据

如果您使用 Vuex 或 Pinia，还可以使用一些软件包来获得更轻松的时间（自动将您的商店同步到持久的内容中）。

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

对于pinia：/sf/answers/5170475061/

如果您使用 F5 重新加载页面，所有 JS 将被擦除并再次加载。因此，不会保留任何状态，因为它将是一个全新的页面。使用前端框架时，您不能指望它在页面刷新后就可以工作。

当您遵循 时，也是如此href，这是一个真正的导航。你需要做的是使用一个<nuxt-link></nuxt-link>组件，比如to="/profile"让 VueJS 移动到这个 URL。

NuxtLink<router-link></router-link>是一个 Nuxt.js 组件，本质上是一个位于Vue router之上的组件。

TLDR：您不能使用window.location.href, 或 之类的东西<a href="..."。nuxt-link如果您仅使用 VueJS，则可以通过 Nuxt ( ) 或 Vue 的路由器 ( )使用给定的组件router-link。

阅读 Vue 路由器的文档可能是了解更多内容的良好开端！

如果您正在使用nuxt/auth，请尝试一下：https://auth.nuxtjs.org/api/storage/#universal-storage