vue.js 使用Options API设置Pinia状态

5kgi1eie  于 2023-03-09  发布在  Vue.js
关注(0)|答案(1)|浏览(198)

我在选项API中定义了这个存储:

import { defineStore } from "pinia";
import AxiosBeerOffice from "@/services/axiosBeerOffice";

const uri = {
  getNavbarItems: "/navbarItems",
};

export const useNavbarStore = defineStore({
  id: "navbar",
  state: () => ({
    navbarItems: [],
  }),
  actions: {
    getNavbarItems: async () => {
      const response = await AxiosBeerOffice.get(uri.getNavbarItems, true);
      const { data } = response;
      this.navbarItems = data;
    },
  },
});

问题是,当我调用getNavbarItems操作时,将值设置为navbarItems的行向我抛出以下错误:

我真的不明白发生了什么事,所以任何帮助将不胜感激。

9wbgstp7

9wbgstp71#

箭头函数没有自己的this绑定,这解释了this.navbarItems的错误。请尝试以下方法:

actions: {
    async getNavbarItems() {
      // …
    },
  },

基于https://github.com/vuejs/pinia/discussions/1267。另请参阅https://pinia.vuejs.org/core-concepts/actions.html中的示例

相关问题