如何将 mapActions 与 vue + Typescript 类组件一起使用？

Question

我想知道...mapActions([])在 Typescript vue 类组件中使用的正确方法是什么。

这就是我的做法：

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { mapActions } from "vuex";

@Component
export default class UsersAdd extends Vue {
  userName: string = "";

    ...mapActions(["newUser"]) /*mapAction from vuex */
  addUser() {
    console.log("...adding new user");
    this.newUser(this.userName);
  }
}
</script>

正如你所知道的，它不起作用......

使用Javascript我这样做。

methods:{
  ...mapActions(["newUser"])
}

我如何使用 Typescript 类组件来做到这一点？

编辑： 我已经尝试过这种方式，但它仍然无法正常工作

@Component({
  methods: {
    ...mapActions(["newUser"]) /*mapAction from vuex */
  }
})
export default class UsersAdd extends Vue {
  userName: string = "";

  addUser() {
    console.log("...adding new user");
    this.newUser(this.userName);
  }
}

Answer 1

如果您不想引入另一个依赖项（即vuex-class）。我们可以将 store 中的操作映射到 Typescript 中的组件，如下所示：

@Component({
  computed: {
    ...mapActions({
      someLoadDataAction: "someLoadDataAction"
    })
  }
})
export default class HelloWorld extends Vue {
  someLoadDataAction!: () => any;

  mounted() {
    console.log(this.someLoadDataAction);
  }
}

关键是添加这个someLoadDataAction!: () => any用于 Typescript 的静态类型检查。例如，我们将函数类型定义为() => any，但您可以将其更改为vuex商店中操作的实际返回类型。

Answer 2

在 Action 注释的帮助下，您可以通过这种方式执行此操作。安装npm install --save vuex-class

import { Action } from 'vuex-class'

@Component()
export default class UsersAdd extends Vue {
  userName: string = "";

  @Action('newUser')
  newUser!: (newUser: string) => void
  addUser() {
    console.log("...adding new user");
    this.newUser(this.userName);
  }
}