Vue.js 如何将 mapActions 与 vue + Typescript 类组件一起使用

发布于05月25日

我想知道在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类组件实现这一点？

Edit:

@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);
  }
}

推荐答案

如果你不想带来另一种依赖(即vuex-class).我们可以将存储中的操作映射到Typescript中的组件，如下所示:

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

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

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