Question

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
}

如果我将初始化程序的默认值设置为true或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()

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

[更新] 正如@ittus所说，我应该使用@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挂钩是否正常运行。

Answer 1

您应该调用mutation更新vuex状态。

或者您可以将MutationAction与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

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

1 个答案: