[英]How to add a notification to a Quasar project inside of a Typescript store
我正在嘗試使用 "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 導入“Notify”並使用 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)
}
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.