Question

我对vue / vuex中的状态管理有疑问

我将'nuxt-vuex-localstorage'用于持久性
我将商店分为“ ui”，“ user”等模块

问题在于，当我在一个动作中调度两个商店动作时，例如

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

这给了我错误，因为首先我将setSignInVisible设置为false，但是下一个acion将其设置为true。我认为发生这种情况是因为localStorage操作是异步的。

这解决了这个问题：

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

但是我的问题是，这应该以这种方式工作，还是有一些更好的方法来管理状态。我不担心覆盖状态的方法。

Answer 1

因此，在下面的行中，您将一个原子值false传递给一个操作或调度方法，该方法可能被用来将this.$store.state.ui.signInVisible的值设置为false。 / p>

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

vuex中的

突变 不允许是异步，而操作是。它们并不是天生就异步的。因此，为了保持一致性，即使某些开发人员本质上是同步的，他们也喜欢通过操作设置其所有属性。所以你可以打电话：

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

您还可以将其设置为this.$store.state.ui.signInVisible = false状态或者，您可以尝试使用vuex函数mapMutations将它们放在组件的方法部分中，然后直接调用它们。还不确定为什么将localStorage放入vuex，因为您可以从任何地方访问它。

Vuex，nuxt，localStoarage，状态覆盖

1 个答案: