У меня проблемы с компонентом проекта Quasar, который я сейчас делаю. В настоящее время я использую Q-таблицу, которая извлекает информацию из поля данных. Это поле данных получает значение поля данных в хранилище Vuex, которое должно синхронизироваться c автоматически, однако этого не происходит. Если я go вышел из компонента и go вернулся в него, то поле данных изменилось, но всякий раз, когда я нахожусь на компоненте, кажется, что компонент не перезагружается для синхронизации c данных. Буду признателен за любую помощь Код Vuex Store ниже:
import { Module, VuexModule, getModule, Mutation, Action } from 'vuex-module-decorators'
import { websocket } from 'src/boot/socket.io-client'
import store from 'src/store'
import { AcademicProgramData, AcademicProgramPagination, AcademicProgramQualification, AcademicProgramStatus } from './types'
export { AcademicProgramData, AcademicProgramPagination, AcademicProgramStatus, AcademicProgramQualification } from './types'
export interface AcademicProgramState {
data: AcademicProgramData [],
filter: string,
statuses: AcademicProgramStatus [],
qualifications: AcademicProgramQualification [],
pagination: AcademicProgramPagination
}
@Module({
name: 'academicProgram',
namespaced: true,
dynamic: true,
store
})
class AcademicProgram extends VuexModule implements AcademicProgramState {
public data: AcademicProgramData []= []
public filter: string = ''
public statuses: AcademicProgramStatus [] = []
public qualifications: AcademicProgramQualification [] = []
public pagination: AcademicProgramPagination = {
descending: true,
rowsNumber: 10,
rowsPerPage: 10,
page: 1,
sortBy: 'name'
}
get getData() {
return this.data
}
@Mutation
public SET_PAGINATION(pagination: AcademicProgramPagination) {
this.pagination = pagination
}
@Mutation
public SET_FILTER(filter: string) {
this.filter=filter
}
@Mutation
public SET_DATA (data: AcademicProgramData []) {
this.data = data
}
@Mutation
public SET_STATUSES (statuses: AcademicProgramStatus []) {
this.statuses=statuses
}
@Mutation
public SET_QUALIFICATIONS (qualifications: AcademicProgramQualification []) {
this.qualifications=qualifications
}
@Mutation
public SET_PAGINATION_VARS (total: number, listtotal: number)
{
this.pagination.rowsNumber=total
}
@Action
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public async fetchData() {
let dir: string=''
if(this.pagination.descending===true) {
dir='DESC'
}
else {
dir='ASC'
}
await websocket.emit('query', `{
academicPrograms(
page: {
skip: 0
first: ${this.pagination.rowsPerPage}
}
filter: {
ilike: {
name: "${this.filter}"
}
}
order: {
by: ${this.pagination.sortBy}
dir: ${dir}
}
) {
pagination {
total
listTotal
}
list {
id
name
code
type {
id
name
}
status {
id
name
}
}
}
}`, (response: { errors: any; data: { academicPrograms: { list: AcademicProgramData[]; pagination: { total: number; listTotal: number; } } } }) => {
console.log(response.data.academicPrograms.list)
this.SET_DATA(response.data.academicPrograms.list)
this.SET_PAGINATION_VARS(response.data.academicPrograms.pagination.total, response.data.academicPrograms.pagination.listTotal)
})
}
@Action
public async getQualifications() {
await websocket.emit('query', `{
academicProgramTypes
{
pagination {
total
listTotal
}
list {
id
name
}
}
}`, (response: { errors: any; data: { academicProgramTypes: { list: AcademicProgramData []; pagination: { total: number } } } }) => {
this.SET_QUALIFICATIONS(response.data.academicProgramTypes.list)
})
}
@Action
public async getStatuses() {
await websocket.emit('query', `{
academicProgramStatuses
{
pagination {
total
listTotal
}
list {
id
name
}
}
}`, (response: { errors: any; data: { academicProgramStatuses: { list: AcademicProgramData []; pagination: { total: number } } } }) => {
this.SET_STATUSES(response.data.academicProgramStatuses.list)
})
}
@Action
public async addAcademicProgram(input: AcademicProgramData) {
await websocket.emit('query', `mutation {
createAcademicProgram (
academicProgram: {
code: "${input.code}"
name: "${input.name}"
typeId: "${input.type.id}"
statusId: "${input.status.id}"
}
) {
id
ok
message
}
}`, (response: {errors: any; data: {id: any; ok: boolean; message: String} } ) => {
console.log(response)
})
}
@Action
public async editAcademicProgram(input: AcademicProgramData) {
await websocket.emit('query', `mutation {
updateAcademicProgram (
academicProgram: {
id: "${input.id}"
code: "${input.code}"
name: "${input.name}"
typeId: "${input.type.id}"
statusId: "${input.status.id}"
}
) {
id
ok
message
}
}`, (response: {errors: any; data: {id: any; ok: boolean; message: String}}) => {
console.log(response)
})
}
@Action
public async deleteAcademicProgram(input: AcademicProgramData) {
await websocket.emit('query', `mutation {
deleteAcademicProgram (
academicProgramId: "${input.id}"
) {
id
ok
message
}
}`, (response: {errors: any; data: {id: any; ok: boolean; message: String } }) => {
console.log(response)
})
}
}
export const AcademicProgramModule = getModule(AcademicProgram)
Код моего компонента выглядит следующим образом:
<template>
<div>
<q-toolbar
class="bg-grey-1 text-subtitle1 text-blue-grey-8 shadow-2 rounded-borders"
>
<q-breadcrumbs class="text-grey" active-color="primary">
<template v-slot:separator>
<q-icon size="24px" name="arrow_forward" color="primary" />
</template>
<q-breadcrumbs-el
label="Settings"
icon="settings"
class="hover cursor-pointer"
@click="$router.push('/system')"
/>
<q-breadcrumbs-el
label="Academic Program"
icon="description"
/>
</q-breadcrumbs>
</q-toolbar>
<q-table class="q-mt-sm"
:columns="columns"
:data.sync="data"
:pagination.sync="pagination"
row-key="id"
selection="single"
:selected.sync="selected"
@request="changePagination"
>
<template slot="top">
<q-input
v-model="filter"
clearable
placeholder="Search by Academic Program"
type="text"
class="col-3"
@keypress.enter.native="search"
/>
<q-btn
class="q-pl-sm q-pr-sm"
color="primary"
flat
@click="$refs.addAcademicProgram.toggle()"
>
<q-icon name="fas fa-plus" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Add new Academic Program</strong>
</q-tooltip>
</q-btn>
<q-btn
class="q-pl-sm"
color="primary"
:disable="!selected.length"
flat
@click="$refs.editAcademicProgram.toggle()"
>
<q-icon name="fas fa-pencil-alt" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Edit Academic Program</strong>
<br />Select record first
</q-tooltip>
</q-btn>
<div class="col" />
<q-btn
color="negative"
:disable="!selected.length"
flat
round
@click="$refs.deleteAcademicProgram.toggle()"
>
<q-icon name="fas fa-trash-alt" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Delete Academic Program</strong>
<br />Select record first
</q-tooltip>
</q-btn>
</template>
</q-table>
<addAcademicProgram ref="addAcademicProgram"></addAcademicProgram>
<editAcademicProgram
:data="selected"
ref="editAcademicProgram"
></editAcademicProgram>
<deleteAcademicProgram :data="selected" ref="deleteAcademicProgram"></deleteAcademicProgram>
</div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { AcademicProgramModule, AcademicProgramQualification, AcademicProgramStatus, AcademicProgramData, AcademicProgramPagination } from 'src/store/academicProgram'
import AddAcademicProgram from './AddAcademicPrograms.vue'
import EditAcademicProgram from './EditAcademicPrograms.vue'
import DeleteAcademicProgram from './DeleteAcademicPrograms.vue'
@Component({
components: {
addAcademicProgram: AddAcademicProgram,
editAcademicProgram: EditAcademicProgram,
deleteAcademicProgram: DeleteAcademicProgram
}
})
export default class ManageAcademicProgram extends Vue {
private filter: string = AcademicProgramModule.filter
private selected: AcademicProgramData [] = []
private pagination: AcademicProgramPagination = AcademicProgramModule.pagination
private columns = [
{
name: 'code',
label: 'Code',
align: 'center',
required: true,
field: 'code',
sortable: true
},
{
name: 'name',
label: 'Name',
align: 'center',
required: true,
field: 'name',
sortable: true
},
]
private getstatuses: AcademicProgramStatus [] = AcademicProgramModule.statuses
private qualifications: AcademicProgramQualification [] = AcademicProgramModule.qualifications
private data: AcademicProgramData [] = AcademicProgramModule.data
changePagination() {
AcademicProgramModule.SET_PAGINATION(this.pagination)
AcademicProgramModule.fetchData()
}
search() {
console.log("Searched")
if(this.filter===null)
{
this.filter=''
}
AcademicProgramModule.SET_FILTER(this.filter)
AcademicProgramModule.fetchData()
console.log('component data... ',this.data)
}
beforeMount() {
AcademicProgramModule.fetchData()
AcademicProgramModule.getStatuses()
AcademicProgramModule.getQualifications()
}
}
</script>