Nuxt.js vuex 存储未持久化 [英] Nuxt.js vuex store not persisted

问题描述

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

I've got some strange issues with my Nuxt.js Setup. Some States in Store arent persistent, everytime I load another view, they went back to the default value.

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

Testscenario is to hit the "test"-button who call the method with mutation-commit "setTest" which set the state to "Hello". Currently it works fine, but if I changed the view or reload the page, the state is set to default "test".

我做错了什么?

推荐答案

好的，所以行为完全符合逻辑.Vuex 不应该是持久化的.

Alright, so the behavior is totally logic. Vuex is not supposed to be persistent.

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

For any persistence on the front-end, you need either:

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

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

Some of the packages here may be useful: https://github.com/vuejs/awesome-vue#persistence

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

If you reload your page with an F5, all your JS will be wiped and loaded again. Hence, no state will be kept since it will be a brand new page. When working with frontend frameworks, you cannot expect it to just work after a page refresh.

当你跟随一个 href 时也是一样，它是一个真正的真实导航.你需要做的是使用一个 组件，用类似 to="/profile" 的东西来让 VueJS 移动到这个 URL.

Same go when you do follow an href, it is an actual real navigation. What you need to do, is to use a <nuxt-link></nuxt-link> component, with something like to="/profile" to let VueJS move to this URL.

NuxtLink 是 Nuxt.js 组件，本质上是 <router-link></router-link> 之上的组件，也就是 Vue 路由器.

NuxtLink is a Nuxt.js component and essentially a component on top of <router-link></router-link>, which is Vue router.

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

TLDR: you cannot use things like window.location.href, nor <a href="...". You may use the given components by either Nuxt (nuxt-link) or Vue's router (router-link), if you're using VueJS only.

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

Giving a read to the Vue router's documentation may be a good start to understand things a bit more !

这篇关于Nuxt.js vuex 存储未持久化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！