Vue3选项式API调用Pinia Action报错问题求助

你遇到的Action调用失败问题，核心是两个错误导致的：

错误1：mapActions放置位置错误 #

Pinia的mapActions是用来将store中的action映射到组件的methods中的，你现在把它放在了computed计算属性里，这会导致方法无法正常绑定和调用。

错误2：Action名称不匹配 #

组件里尝试映射的是getData，但你的store中定义的action实际名称是getData1，名称不一致导致找不到对应的方法。

修正后的组件代码 #

import { mapActions } from "pinia";
import { useTableStore } from "../../../stores/table";
export default {
  name: "LoggingForm",
  data() {
    return {
      login: {
        username: "",
        password: "",
        serverhost: "",
      },
    };
  },
  methods: {
    ...mapActions(useTableStore, ["getData1"]), // 修正：移到methods，使用正确的action名称
    submit(){
      this.getData1(this.login) // 调用匹配的action
    }
  },
};

可选：统一Action名称的修正方案 #

如果你想把store里的action名称改成getData，可以调整store代码：

import { defineStore } from 'pinia'
import authService from "@/api/auth.js";

export const useTableStore = defineStore({
  id: 'table',
  state: () => ({
    table: []
  }),
  getters: {
    headers: (state) => state.table[0],
    body: (state) => state.table.slice(1)
  },
  actions: {
    async getData(data) { // 统一名称为getData
     // do something
    },
  }
})

对应的组件中就可以保持映射["getData"]，submit方法里调用this.getData(this.login)即可。

内容的提问来源于stack exchange，提问作者morteza mortezaie