Nuxt.js vuex 存储未持久化

Posted 2023-02-22

【中文标题】Nuxt.js vuex 存储未持久化

【英文标题】：Nuxt.js vuex store not persisted

【发布时间】：2021-06-26 07:36:23

【问题描述】：

我的 Nuxt.js 设置出现了一些奇怪的问题。 Store 中的某些状态不是持久的，每次我加载另一个视图时，它们都会返回默认值。

pages/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>

store/index.js

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

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

Testscenario 是点击“test”按钮，该按钮使用mutation-commit“setTest”调用方法，将状态设置为“Hello”。目前它工作正常，但如果我更改视图或重新加载页面，状态将设置为默认“测试”。

我做错了什么？

【问题讨论】：

如果你 F5 页面，Vuex 商店被“重置”是完全合法的。 “改变观点”是什么意思？ vue-router 还是自己修改网址？

嘿@kissu :-) 我只需单击导航栏链接即可“更改视图”，例如： $t(" my_profile") 那么它真的重新加载了吗？我使用来自 nuxt.js 的常见内置东西

【参考方案1】：

好的，所以行为完全合乎逻辑。 Vuex 不应该是持久的。

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

cookies 本地存储 IndexedDB 通过调用后端获取数据

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

---

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

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

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

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

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

【讨论】：

我也可以推荐Vuex Persisted State plugin。