vue3和pinia如何显示通知

Question

我有这家店（pinia）：

actions: {
        async addCompany ( company ) {
            await axios.post('/api/companies.json', company)
                .then( (response) => {
                    this.companies.push(company);
                })
                .catch((error) => {
                    console.log(error);
                });
        },

我从我的组件中这样调用它：

 methods: {
    saveRow(item) {
      this.store.addCompany(this.editedItem)
    },

一切正常，但现在我想用 toast 或 Swal 或其他任何东西（我正在使用 quasar）通知用户一切正常，或者如果我们遇到错误。是这样的：发明代码...是我想要实现的：

methods: {
    saveRow(item) {
      const result = this.store.addCompany(this.editedItem)
      if ( result == "OK") {
          alert("All good!)
      } else {
         alert ("HORROR!")
      }
    },

你知道我的意思...但我不知道该怎么做。有什么帮助或线索吗？

Answer 1

在您的商店中，您可以 return 来自 axios 本身的承诺：

addCompany ( company ) {
  return axios.post('/api/companies.json', company)
    .then( (response) => {
        this.companies.push(company);
     })
     .catch((error) => {
       console.log(error);
     });
},

然后在您的组件中，您可以像在商店中那样简单地执行 .then：

import {Notify} from "quasar";

saveRow(item) {
      const result = this
         .store
         .addCompany(this.editedItem)
         .then(() => {
            Notify.create("Company has been added")
         })
         .catch(() => {
            Notify.create("There was an error adding company")
         });

},

欢迎访问 Javascript Promises

上的 MDN 文档

vue3和pinia如何显示通知

vue3 and pinia how to display notifications

vue.js

vuejs3

pinia