Вычислительный установщик свойства не вызывается

Question

Итак, у меня есть вычисляемое свойство, которое является объектом типа, который я определил в моем магазине Vuex. Я пытаюсь использовать это свойство на моем компоненте с v-моделью. Я определил геттеры и сеттеры для этого свойства, и я почти уверен, что все настроил правильно, если я что-то не заметил. Я попытался войти в консоль внутри установщика, чтобы увидеть, запускается ли он когда-либо, но в консоли ничего не регистрируется, поэтому он вообще не вызывается. Любая помощь будет оценена

код для магазина:

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 { MessageModule } from 'src/store/message/index'
import { Notify } from 'quasar'
import { validate } from "class-validator"

export { Course } from './types'
export { DataTablePagination } from '../types'
export interface CourseState {
  pagination: DataTablePagination
  courses: Course []
  filter: string,
  disabled: boolean,
  selected: Course [],
  active: boolean,
  editCourseOpened: boolean,
  addCourseOpened: boolean,
  addCourseData: Course,
  editCourseData: Course,
  addCourseDisabled: 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 = ''
  public disabled = true
  public selected: Course [] = []
  public active = true
  public editCourseOpened = false
  public addCourseOpened = false
  public addCourseData = new Course()
  public editCourseData = new Course()
  public addCourseDisabled = true

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

  @Mutation
  SET_EDITCOURSEDATA(data: Course) {
    this.editCourseData.copy(data)
  }

  // public SET_ADDCOURSEDATA(payload: { key: string, value: number | string }) {
  //   const { key, value } = payload
  //   if (Object.prototype.hasOwnProperty.call(this, key)) {
  //     // eslint-disable-next-line @typescript-eslint/no-explicit-any
  //     (this as any)[key] = value
  //   }
  // }
  @Mutation
  SET_ADDCOURSEDATA(data: Course) {
    this.addCourseData.copy(data)
  }

  @Mutation
  SET_EDITCOURSEOPENED(opened: boolean) {
    this.editCourseOpened=opened
  } 

  @Mutation
  SET_ADDCOURSEOPENED(opened: boolean) {
    this.addCourseOpened=opened
  }

  @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 ValidateAddCourseData() {
    validate(this.addCourseDisabled).then(errors => {
      console.log(errors)
      if(errors.length) {
        this.SET_ADDCOURSEDISABLED(true)
      } else {
        this.SET_ADDCOURSEDISABLED(false)
      }
    })
  }

  @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 
      } 
    } 
  }) => {
      if(response.data) {
        this.fetchCourses()
        Notify.create({
          timeout: 3000,
          position: 'center',
          color: 'primary',
          message: 'Course Added Successfully'
        })
        this.SET_ADDCOURSEOPENED(!this.addCourseOpened)
      }
      else {
        MessageModule.newMessage({title: 'Error: Addition Failed', icon: 'error', message: 'Addition failed. Ensure that the course code you have entered is unique or contact your system administrator'})
      }
    })
  }

  @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 {
        MessageModule.newMessage({ title: 'Deletion Failed', icon: 'error', message: 'Deletion Failed. Ensure that no course instances are still tied to this course or contact your system administrator' })
      }
    })
  }

  @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])
        this.SET_EDITCOURSEOPENED(!this.editCourseOpened)
        Notify.create({
          timeout: 3000,
          color: 'primary',
          message: 'Course Updated Successfully',
          position: 'center'
        })
      }
      else {
        MessageModule.newMessage({ title: 'Update Failed', icon: 'error', message: 'Update Failed. Ensure that all course codes are unique or contact your system administrator'})
      }
    })
  }

  @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)

код для компонента:

<template>
  <q-dialog v-model="isOpened" :bordered="true">
    <q-card style="width: 50vw;">
      <q-toolbar class="bg-grey-5 text-center">
        <q-toolbar-title>Add Course</q-toolbar-title>
        <q-btn flat round dense icon="close" v-close-popup />
      </q-toolbar>
      <q-card-section class="col">
        <q-input v-model.trim="course.name" label="Name" type="object"
        :rules="[
          val => val.length > 0 || 'Required field'
        ]"/>
        <q-input v-model="course.code" label="Code"
        :rules="[
          val => val.length > 0 || 'Required field'
        ]"/>
        <q-input v-model.number="course.creditHours" label="Credit Hours" type="number"
        :rules="[
          val => val >= 0 || 'No negatives allowed'
        ]"/>
        <q-input v-model.number="course.numberOfLabs" label="Number of Labs" type="number"
        :rules="[
          val => val >= 0 || 'No negatives allowed'
        ]"/>
        <q-input v-model.number="course.contactHours" label="Contact Hours" type="number"
        :rules="[
          val => val >= 0 || 'No negatives allowed'
        ]"/>
        <q-card-actions align="right">
          <q-btn color="primary" :disable="disabled" @click="submit();">
            <q-icon name="save" />
            <q-tooltip
              anchor="top middle"
              self="bottom middle"
              :offset="[10, 10]"
            >
              <strong>Add Course</strong>
            </q-tooltip>
          </q-btn>
          <q-btn color="red" @click="toggle()" icon="cancel">
            <q-tooltip
            anchor="top middle"
            self="bottom middle"
            :offset="[10, 10]"
            >
              <strong>Cancel</strong>
            </q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { CourseModule, Course } from 'src/store/course/index'

@Component
export default class AddCourse extends Vue {
  //private course: Course = new Course()
  //private disabled = true

  get disabled() {
    return CourseModule.addCourseDisabled
  }

  get course() {
    return CourseModule.addCourseData
  }

  set course(args: any) {
    console.log(args)
    //CourseModule.SET_ADDCOURSEDATA(newValue)
  }

  get isOpened() {
    return CourseModule.addCourseOpened
  }

  set isOpened(newValue: boolean) {
    CourseModule.SET_ADDCOURSEOPENED(newValue)
  }

  toggle() {
    CourseModule.SET_ADDCOURSEDATA(this.course)
    this.isOpened = !this.isOpened
    // if(this.isOpened) {
    //   this.getdisabled()
    // }
    // else {
    //   this.course.clear()
    // }
  }

  submit() {
    CourseModule.addCourse(this.course)
    //this.toggle()
  }

  // getdisabled() {
  //   validate(this.course).then(errors => {
  //     if(errors.length) {
  //       this.disabled=true
  //     } else {
  //       this.disabled=false
  //     }
  //   })
  //   return true
  // }
}
</script>

Answer 1

Как вы уже отметили, стандартным решением здесь было бы иметь вычисляемое свойство для каждого поля формы, с get и set для каждого, проходящего в хранилище.

One Жизнеспособной альтернативой было бы использование Proxy для перехвата установки свойств объекта. Я не знаю, как написать это в TypeScript, но это не должно отвлекать от основной идеи:

const store = new Vuex.Store({
  state: {
    course: {
      name: 'Algebra',
      teacher: 'Smith'
    }
  },
  
  mutations: {
    course (state, course) {
      state.course = course
    }
  }
})

new Vue({
  el: '#app',
  store,
  
  computed: {
    course () {
      const store = this.$store
      const course = store.state.course
      
      return new Proxy(course, {
        set (obj, key, value) {
          store.commit('course', { ...obj, [key]: value })          
          return true
        }
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>

<div id="app">
  <input v-model="course.name">
  <br>
  <input v-model="course.teacher">
  <br>
  <p>{{ course.name }}</p>
  <p>{{ course.teacher }}</p>
</div>

Если вам потребуется поддержка IE, вы не сможете использовать Proxy, но должно быть возможно реализовать нечто подобное с использованием стандартных JavaScript свойства. Идея почти такая же, как и для правильных Proxy, но вам придется явно создавать обработчики get и set для объекта 'proxy'.