时间戳

首页 > 解决方案 > 初始化时如何在Vuex中动态设置初始状态（使用“if”）？

typescript - 初始化时如何在Vuex中动态设置初始状态（使用“if”）？

问题描述

Vue/Vuex 初学者在这里。有没有办法在 Vuex 中动态设置初始状态？我有一个名为is_here（true如果存在成员）的布尔状态，我想在设置之前使用条件语句动态检查其值。

如果我尝试编译如下代码，它会返回此错误：TS2564: Property 'is_here' has no initializer and is not definitely assigned in the constructor.

import { Action, Module, Mutation, VuexModule, getModule } from 'vuex-module-decorators';

export interface IMemberState {
  is_here: boolean;
}

@Module({dynamic: true, store, name: 'member', namespaced: true})
class Member extends VuexModule implements IMemberState {
  public is_here: boolean // The app expects me to set true or false here
}

如果我将初始化程序的默认值设置为trueor false，则应用程序编译正确。但是，如果我更改状态（假设从true到false）并刷新页面，状态将恢复为true（基于此布尔值呈现不同的按钮，因此我可以看到它已恢复为true）。

public is_here: boolean = true

我想做的是在设置is_here状态之前进行 API 调用并检查某些事情。我写了一个@Action做必要的检查。

@Action({})
public async setHereStatus() {
  await axios.get('api/member_status').then((response)=>
  if(response.here_status) {
  // This action returns true or false
  )
}

我试着把这个@Action而不是硬编码的值is_here工作，但我得到了这个错误：TS2322: Type '() => Promise<boolean>' is not assignable to type 'boolean'.

public is_here: boolean = this.setHereStatus()

在这种情况下，如何动态分配此状态？我应该使用类似createdor的东西mounted吗？

[更新]正如@ittus 评论的那样，我应该使用 a@Mutation来设置is_here状态。我一直在做这样的实验。

@Module({dynamic: true, store, name: 'member', namespaced: true})
class Member extends VuexModule implements IMemberState {
  public is_here: boolean = false

  @Mutation
  public SET_HERE_STATUS(status: boolean): void {
    this.is_here = status
  }

  @Action({})
  public async setHereStatus() {
    await axios.get('api/member_status').then((response)=>
    if(response.here_status) {
      this.SET_HERE_STATUS(true)
    }else {
      this.SET_HERE_STATUS(false)
  }
}

// In the Vue component where I use this state
  created () {
    memberModule.setHereStatus()
  }

但是，同样的问题仍然存在；如果我刷新页面，或关闭窗口并再次访问相同的 URL，状态将被重置。我不知道我的created钩子是否正常工作。

标签： typescriptvue.jsstatevuex

解决方案

您应该调用突变来更新 vuex 状态。

或者您可以将突变和动作与 MutationAction 结合起来

@Module({dynamic: true, store, name: 'member', namespaced: true})
class Member extends VuexModule implements IMemberState {
  public is_here: false
  public is_here_loaded: false

  @MutationAction({mutate: ['is_here', 'is_here_loaded']})
  public async setHereStatus() {
    const response = await axios.get('api/member_status')
    return {
      is_here: response.here_status,
      is_here_loaded: true
    }
  }
}

您可以将默认值设置为false。如果您需要等待变量is_here被设置，您可以使用附加标志来检查。在上面的代码中，我使用is_here_loaded作为标志变量。

setHereStatus应该在组件时调用created

推荐阅读