如何向 Typescript 商店内的 Quasar 项目添加通知

Question

我正在尝试使用“this.$q.notify({})”在我的一个组件内的 Typescript 商店内使用 Quasar 的通知库，但我无法在商店内访问它。我会想知道执行此操作的正确方法是什么。这行代码在 deleteCourse Action 中被调用。

店铺代码：

import { Module, VuexModule, getModule, Mutation, Action } from 'vuex-module-decorators'
import { websocket } from 'src/boot/socket.io-client'
import store from 'src/store'
import { DataTablePagination } from '../types'
import { Course } from './types'
import { LayoutModule } from 'src/store/layout/index'

export { Course } from './types'
export { DataTablePagination } from '../types'

export interface CourseState {
  pagination: DataTablePagination
  courses: Course []
  filter: string,
  disabled: boolean,
  selected: Course [],
  active: boolean
}

@Module({
  name: 'course',
  namespaced: true,
  dynamic: true,
  store
})

class CourseClass extends VuexModule implements CourseState {
  public pagination: DataTablePagination = {
    descending: false,
    rowsNumber: 0,
    rowsPerPage: 10,
    page: 1,
    sortBy: 'name'
  }
  public courses : Course [] = []
  public filter: string = ''
  public disabled: boolean = true
  public selected: Course [] = []
  public active: boolean = true

  @Mutation
  SET_ACTIVE(active: boolean) {
    this.active=active
  }

  @Mutation
  SET_PAGINATION(pagination: DataTablePagination) {
    this.pagination=pagination
  }

  @Mutation
  SET_SELECTED(selected: Course []) {
    this.selected=selected
  }

  @Mutation
  SET_FILTER(filter: string) {
    this.filter=filter
  }

  @Mutation
  SET_COURSES(courses: Course []) {
    this.courses=courses
  }

  @Mutation
  SET_DISABLED(disabled: boolean) {
    this.disabled=disabled
  }

  @Action 
  public async addCourse(input: Course) {
    websocket.emit('query', `mutation {
      createCourse (
        course: {
          code: "${input.code}"
          name: "${input.name}"
          creditHours: ${input.creditHours}
          numberOfLabs: ${input.numberOfLabs}
          contactHours: ${input.contactHours}
          chargeableCredits: 0
        }
      ) {
        ok
        message
      }
  }`, (response: { 
    errors: any
    data: { 
      createAcademicProgram: { 
        ok: boolean
        message: String 
      } 
    } 
  }) => {
      this.fetchCourses()
      if(response.data) {
        this.fetchCourses()
      }
      else {
        LayoutModule.SET_ERRORMSGOPENED(true)
        LayoutModule.SET_MESSAGE('Addition Failed')
      }
    })
  }

  @Action 
  public async deleteCourse(input: Course) {
    websocket.emit('query', `mutation {
      deleteCourse (
        courseId: "${input.id}"
      )  {
        id
        ok
        message
      }
    }`, (response: { 
      errors: any; 
      data: { 
        deleteCourse: { 
          id: any; 
          ok: boolean; 
          message: String 
        } 
      } 
    }) => {
      if(response.data) {
        this.fetchCourses()
        this.$q.notify({
          message: 'Course Deleted Successfully'
        })
        //this.SET_SELECTED([])
      }
      else {
        LayoutModule.SET_MESSAGE("Deletion Failed")
        LayoutModule.SET_ERRORMSGOPENED(true)
      }
    })
  }

  @Action
  public async editCourse(input: Course) {
    websocket.emit('query', `mutation {
      updateCourse (
        course: {
          id: "${input.id}"
          code: "${input.code}"
          name: "${input.name}"
          creditHours: ${input.creditHours}
          numberOfLabs: ${input.numberOfLabs}
          contactHours: ${input.contactHours}
          chargeableCredits: 0
        }
      ) {
        id
        ok
        message
      }
    }`, (response: {
      errors: any
      data: {
        updateCourse: {
          id: string
          ok: boolean
          message: string
        }
      }
    }) => {
      if(response.data) {
        this.fetchCourses()
        this.SET_SELECTED([input])
      }
      else {
        LayoutModule.SET_MESSAGE("Update Failed")
        LayoutModule.SET_ERRORMSGOPENED(true)
      }
    })
  }

  @Action 
  public async fetchCourses() {
    const order = this.pagination.sortBy !== null ? `order: {
      by: ${this.pagination.sortBy}
      dir: ${this.pagination.descending ? 'DESC' : 'ASC'}
    }` : ''
    websocket.emit('query', `{
      courses(
        page: {
          skip: ${(this.pagination.page - 1) * this.pagination.rowsPerPage},
          first: ${this.pagination.rowsPerPage}
        }
        filter: {
          ilike: {
            name: "${this.filter}"
          }
        }
        ${order}
      ) {
        pagination {
          total
          listTotal
        }
        list {
          id
          code
          name
          creditHours
          numberOfLabs
          contactHours
        }
      }
    }`, (response: {
      errors: any
      data: {
        courses: {
          list: Course[]
          pagination: {
            total: number
            listTotal: number
          }
        }
      }
    }) => {
      this.SET_COURSES(response.data.courses.list)
      this.pagination.rowsNumber = response.data.courses.pagination.total
    })
  }
}

export const CourseModule = getModule(CourseClass)

Answer 1

能够通过从 Quasar 导入“通知”并使用 create 函数来解决此问题。

import { Notify } from 'quasar'

@Action 
  public async deleteCourse(input: Course) {
    websocket.emit('query', `mutation {
      deleteCourse (
        courseId: "${input.id}"
      )  {
        id
        ok
        message
      }
    }`, (response: { 
      errors: any; 
      data: { 
        deleteCourse: { 
          id: any; 
          ok: boolean; 
          message: String 
        } 
      } 
    }) => {
      if(response.data) {
        this.fetchCourses()
        Notify.create({
          timeout: 2000,
          position: 'center',
          color: 'primary',
          message: 'Course Deleted Successfully'
        })
      }
      else {
        LayoutModule.SET_MESSAGE("Deletion Failed")
        LayoutModule.SET_ERRORMSGOPENED(true)
      }
    })
  }