typescript - 如何向 Typescript 商店内的 Quasar 项目添加通知
问题描述
我正在尝试使用“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)
解决方案
能够通过从 Quasar 导入“通知”并使用创建功能来解决此问题。
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)
}
})
}
推荐阅读
- google-sheets - .makeCopy - 仅复制值 - 脚本修改
- java - 任务 ':app:extractDeepLinksDebug' 执行失败
- google-apps-script - 在特定时间使用带有特定单元的 onEdit 的简单触发器
- javascript - discord.js“成员未定义”
- node.js - 无法从 getStaticProps nextjs 中的 mdx 文件导入元数据
- javascript - 您正在使用仅运行时构建的 Vue,其中模板编译器不可用错误
- reactjs - 我可以使用 preact-compat(或使用任何其他方法)将 PreactJS 与 React Native 一起使用吗?
- entity-framework - 实体框架如何使两个外键引用同一个表
- c# - 错误:当 dotnet ef 迁移添加 InitialMigration 时构建失败
- ios - 将 UIImage 坐标转换为 CIImage 坐标