Question

我正在尝试使用https://championswimmer.in/vuex-module-decorators中的vuex-module-decorators。假设我的模块的状态有一个支持dir的字典：{[key: string]: string}我可以使用@MutationAction来更新该字典的元素吗？下面的代码不正确，但希望能理解我的意思。

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @MutationAction(???)
  updateDir(keyValue) {
    return keyValue // ???
  }
}

是否有一些有关如何使用@MutationAction的文档，需要使用的args以及提交的实际突变是什么？

Answer 1

这是您应该做的-

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @MutationAction(['dir'])
  async updateDir(keyValue) {
    const currDir = this.dir

    // do any async work (network req) here
    currDir['myKey'] = keyValue

    return ( { dir: currDir } )
  }
}

但是首先您真的不需要任何异步工作。

export default class Module extends VuexModule {
  dir: {[key: string]: string}

  @Mutation
  async updateDir(keyValue) {
    this.dir.myKey = keyValue
  }
}

P.S。我是vuex-module-decorators

的作者

Answer 2

我是vuex的新手，无论如何，它将编译：

export class MyModule extends VuexModule {

    public dir: { [key: string]: string } = {};

    @MutationAction({ mutate: ['dir'] })
    public async updateDir(key: string, value: string) {
        const newDir: { [key: string]: string } = {};
        newDir[key] = value;
        return {
            dir: newDir,
        };
    }

    @MutationAction({ mutate: ['dir'] })
    public async addToDir(key: string, value: string) {
        this.dir[key] = value;
        return {
            dir: this.dir,
        };
    }
}

请注意，我不知道像我在第二个函数中所做的那样修改并重新分配'dir'变量是否可以接受。

如何在vuex-module-decorators中使用MutationAction？

2 个答案: