मैं अपने घटकों में से एक के भीतर एक टाइपस्क्रिप्ट स्टोर के अंदर क्वासर की अधिसूचना पुस्तकालय का उपयोग करने की कोशिश कर रहा हूं "this.$q.notify({}) लेकिन मेरे पास स्टोर के अंदर इसकी पहुंच नहीं है। मैं जानना चाहता हूं ऐसा करने के बारे में जाने का सही तरीका क्या होगा। कोड की इस पंक्ति को 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)
0
Jeffrey penner 19 फरवरी 2020, 22:49

1 उत्तर

क्वासर से 'सूचना' आयात करके और निर्माण समारोह का उपयोग करके इसे हल करने में सक्षम था।

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)
      }
    })
  }
1
Jeffrey penner 19 फरवरी 2020, 23:03
जीवन रक्षक! यह $q का उपयोग करते हुए असंगत रूप से काम करता है लेकिन मानक आयात और Notify.create के साथ परिपूर्ण है। स्व-परीक्षा
 – 
dan
19 सितंबर 2021, 06:46