如何使用vue + Typescript类组件的mapActions？

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). 我们可以将商店中的动作映射到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);
  }
}