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存储区中的操作将其更改为实际的返回类型。

Answer 2

借助动作注释，您可以通过这种方式进行操作。安装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);
  }
}

Answer 3

其他选项，您可以使用vuex-module-decorators，它更好地支持typescript并减少代码。

安装

npm install -D vuex-module-decorators

store/index.ts

import { Action, getModule, Module, Mutation, VuexModule } from "vuex-module-decorators";
import store from "..";

// define Mutations name
enum Mutations {
  NEW_USER_NAME = "NEW_USER_NAME"   
}

// name: module name
// dynamic: true，dynamic create module
// namespaced: true，using namespaced
// store: your root store/index.ts
@Module({ name: 'UserStore', dynamic: true, namespaced: true, store })
export default class UserStore extends VuexModule {
  // state
  userName = '';

  // mutation
  @Mutation
  [Mutations.NEW_USER_NAME](userName: string) {
    this.userName = userName;
  }

  // action
  @Action
  newUser(userName: string) {
    this.context.commit(Mutations.NEW_USER_NAME, userName);
  }
}

// use getModule to safe get instance
export const userStore = getModule(UserStore);

UsersAdd.vue

import { userStore } from "@/store/modules/user";
@Component()
export default class UsersAdd extends Vue {
  userName: string = "";
   
  addUser() {    
    console.log("...adding new user");     
    userStore.newUser(this.userName);
  }
}

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

3 个答案: