Nuxt.js vuex 스토어가 유지되지 않음

Nuxt.js vuex 스토어가 유지되지 않음

내 Nuxt.js Setup에 이상한 문제가 있어.Store의 일부 상태는 지속적이지 않으며, 다른 보기를 로드할 때마다 기본값으로 되돌아갔다.

페이지/테스트부에를 하다

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

테스트시나리오에서는 상태를 "Hello"로 설정하는 돌연변이 커밋 "setTest"로 메소드를 호출하는 "테스트" 버튼을 누른다.현재 잘 작동하지만 보기를 변경하거나 페이지를 다시 로드하면 상태가 기본 "테스트"로 설정된다.

내가 뭘 잘못하고 있는 거지?

좋아, 그럼 그 행동은 완전히 논리적이군Vuex는 집요하지 않아야 한다.

프런트 엔드의 모든 지속성을 위해서는 다음 중 하나가 필요하다.

• 쿠키
• localStorage
• 인덱싱DB
• 전화에서 백엔드로 데이터를 다시 가져오다.

여기 있는 일부 패키지는 유용할 수 있다: 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 라우터 입니다.

TLDR: 당신은 다음과 같은 것들을 사용할 수 없다.window.location.href, no<a href="...". Nuxt(Nuxt)에 의해 주어진 성분을 사용할 수 있다.nuxt-link) 또는 Vue의 라우터(router-link), VueJS만 사용하는 경우.

Vue 라우터 설명서를 읽어주는 것은 상황을 좀 더 이해하기 위한 좋은 시작일 수 있다!

참조URL: https://stackoverflow.com/questions/66868348/nuxt-js-vuex-store-not-persisted