Vuex, next, localStorage, 상태 덮어쓰기

Vuex, next, localStorage, 상태 덮어쓰기

vue/vuex의 상태 관리에 대해 질문이 있습니다.

• 지속성을 위해 'next-vuex-local storage'를 사용합니다.
• 저는 제 가게를 'ui', 'user'와 같은 모듈로 나누었습니다.

문제는 하나의 행동으로 내가 두 개의 상점 행동을 보낼 때 다음과 같은 것입니다.

const res = await API_CALL('someEndpoint')
this.$store.dispatch('ui/setSignInVisible', false)
this.$store.dispatch('customer/setToken', res.token)

처음에는 setSignInVisible을 false로 설정하지만 다음 액션에서는 true로 설정하기 때문에 오류가 발생합니다.localStorage 작업이 비동기식이기 때문에 이 문제가 발생한 것으로 추정됩니다.

이 문제를 해결합니다.

const res = await API_CALL('someEndpoint')
await this.$store.dispatch('ui/setSignInVisible', false)
this.$store.dispatch('customer/setToken', res.token)

하지만 제 질문은, 이것이 이런 식으로 작동하는지 아니면 국가를 관리하는 더 나은 접근법이 있는지입니다.우선 상태에 대해 걱정하지 않을 접근법.

그래서 아래 줄에서, 당신은 원자값을 가지고 있습니다.false다음의 값을 설정하는 데 사용될 것으로 추정되는 조치 또는 파견 방법으로 전달됨this.$store.state.ui.signInVisible로.false.

await this.$store.dispatch('ui/setSignInVisible', false)

vuex의 돌연변이는 비동기식일 수 없습니다. 동작은 비동기식입니다.그들은 본질적으로 비동기적이지 않습니다.따라서 일관성을 위해 일부 개발자들은 일부는 본질적으로 동기화되어 있음에도 불구하고 작업을 통해 모든 속성을 설정하는 것을 좋아합니다.그럼 전화해보세요.

this.$store.commit('ui/setSignInInivisible', false)

상태에서 디렉토리를 설정할 수도 있습니다.this.$store.state.ui.signInVisible = false또는 사용해 볼 수 있습니다.vuex기능.mapMutations구성 요소의 메소드 섹션에 이러한 메소드를 넣고 직접 호출합니다.또한 어디에서나 액세스할 수 있기 때문에 localStorage를 vuex에 넣는 이유를 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/63147773/vuex-nuxt-localstoarage-state-overwrite