typescript - 如何在vue + Typescript类组件中使用mapActions？

Question

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

这是我的方法:

<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)。我们可以将商店中的操作映射到Typescript中的组件，如下所示:

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

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

关键是添加此 someLoadDataAction!: () => any进行Typescript的静态类型检查。例如，我们将函数类型定义为 () => any，但是您可以从 vuex存储区中的操作将其更改为实际的返回类型。