如何在Vue3组件的methods中使用Pinia store？

你遇到的问题是因为当前代码里的store变量未定义，且在选项式API（非<script setup>）的写法中，需要正确获取Pinia store实例才能在methods中使用。以下是两种可行的解决方案：

方案一：通过setup选项暴露store到组件实例 #

在组件的setup选项中获取store实例，将其返回后，就能在methods里通过this访问到：

<script>
import { useUserStore } from "@/stores/UserStore.js";

export default {
  setup() {
    const store = useUserStore();
    // 将store暴露给组件的选项式API部分
    return { store };
  },
  methods: {
    methodExample() {
      console.log(this.store);
    },
  },
};
</script>

方案二：使用Pinia的选项式API辅助函数 #

Pinia提供了mapStores辅助函数，可直接将store映射到组件的计算属性中，方便在methods里调用：

<script>
import { mapStores } from "pinia";
import { useUserStore } from "@/stores/UserStore.js";

export default {
  computed: {
    // 映射useUserStore为组件实例上的userStore属性
    ...mapStores(useUserStore),
  },
  methods: {
    methodExample() {
      console.log(this.userStore);
    },
  },
};
</script>

错误原因说明 #

你之前的代码直接在methods中使用store变量，但该变量既未在组件内定义，也未通过this关联到有效的store实例，因此会抛出ReferenceError: store is not defined错误。

内容的提问来源于stack exchange，提问作者J.Somers