问题描述
- 首先，感谢您的帮助。
我正在处理一个 Electron/vuejs/typescript 项目，现在我遇到了一个问题。 Vuex 模块 getter 的反应性接缝不起作用。我已经安装了 vue-dev-tools，突变已经正确完成，但是我的 vue 组件 getter 没有随着 vue 状态的突变而更新。这是我的代码： 我的组件
<template>
<div>
<b-row>
<b-col>
<b-form-group
label="Niveau"
label-for="level-choise"
>
<b-dropdown v-if="level" id="level-choise" block split variant="light" :text="level.name" >
<b-dropdown-item @click="classroomModule.selectLevel(l)" v-for="(l,index) in levels()" :key="index" >{{l}}</b-dropdown-item>
</b-dropdown>
</b-form-group>
</b-col>
<b-col>
<b-form-group
label="Serie"
label-for="serie-choise"
>
<b-dropdown v-if="serie" id="serie-choise" block split variant="light" :text="serie.name">
<b-dropdown-item @click="classroomModule.selectSerie(s)" v-for="(s,index) in series" :key="index" >{{s}}</b-dropdown-item>
</b-dropdown>
</b-form-group>
</b-col>
<b-col>
<b-form-group
label="Classe"
label-for="classroom-choise"
>
<b-dropdown v-if="classroom" id="classroom-choise" split variant="light" block="true" :text="classroom.name">
<b-dropdown-item @click="classroomModule.selectClassroom(c)" v-for="(c,index) in classrooms" :key="index" >{{c}}</b-dropdown-item>
</b-dropdown>
</b-form-group>
</b-col>
</b-row>
<b-row class="border border-light">
<b-col>
{{classroom}}
</b-col>
</b-row>
</div>
</template>
<script lang="ts" >
import { getModule } from "vuex-module-decorators";
import { Vue,Component } from "vue-property-decorator";
import ClassroomModule from "@/Store/modules/Classroom.module";
import { Classroom } from "@/models/school/Classroom";
import { Serie } from "@/models/school/Serie";
import { Level } from "@/models/school/Level";
@Component
export default class ChooseClassroom extends Vue {
classroomModule : ClassroomModule
constructor(){
super();
this.classroomModule = Object.assign(new ClassroomModule(this.$store),getModule(ClassroomModule,this.$store));
this.classroomModule.getLevels();
console.log("Choose Classroom Mounted!");
setTimeout(()=>{
console.log("Component Level : ",this.level);
console.log("Component Serie : ",this.serie);
console.log("Component CLassroom : ",this.classroom);
console.log("Component Levels : ",this.levels);
console.log("Component Series : ",this.series);
console.log("Component CLassrooms : ",this.classrooms);
},30000)
}
public get classrooms() : Classroom[] {
console.log("Getter classrooms : ",this.classroomModule.classrooms);
return this.classroomModule.classrooms;
}
public get series() : Serie[] {
console.log("Getter series : ",this.classroomModule.series);
return this.classroomModule.series;
}
public get levels() : Level[] {
console.log("Getter levels : ",this.classroomModule.levels);
return this.classroomModule.levels;
}
public get level() : Level {
console.log("Getter level : ",this.classroomModule.level);
return this.classroomModule.level;
}
public get serie() : Serie {
console.log("Getter serie : ",this.classroomModule.serie);
return this.classroomModule.serie
}
public get classroom() : Classroom {
console.log("Getter classroom : ",this.classroomModule.classroom);
return this.classroomModule.classroom;
}
}
</script>
<style>
</style>
这是我的 Vuex 模块：
import { Action,Module,Mutation,VuexModule } from "vuex-module-decorators";
import { Classroom } from "@/models/school/Classroom";
import { Serie } from "@/models/school/Serie";
import { Level } from "@/models/school/Level";
import { Event } from "electron/renderer";
const { ipcRenderer } = window.require("electron");
@Module({
name : "classroom",namespaced : true,})
export default class ClassroomModule extends VuexModule {
private _classrooms : Classroom[] = [];
private _series : Serie[] = [];
private _levels : Level[] = [];
private _level! : Level;
private _serie! : Serie;
private _classroom! : Classroom;
public get level() : Level {
//console.log("2 Level = ",this._level);
return this._level;
}
public get serie() : Serie {
return this._serie
}
public get classroom() : Classroom {
return this._classroom
}
public get classrooms() : Classroom[] {
return this._classrooms;
}
@Mutation
public setClassrooms(c : Classroom[]) {
this._classrooms = c;
}
public get series() : Serie[] {
return this._series;
}
@Mutation
public setSeries(s: Serie[]) {
this._series = s;
}
public get levels() : Level[] {
return this._levels;
}
@Mutation
public setLevels(l : Level[]) {
this._levels = l;
}
@Mutation
public setLevel(l : Level) {
this._level = l;
}
@Mutation
public setSerie(s : Serie) {
this._serie = s;
}
@Mutation
public setClassroom(c : Classroom) {
this._classroom = c;
}
@Action
public selectLevel(level : Level) {
console.log("Select Levels !");
this.context.commit("setLevel",level);
//this.();
this.context.dispatch("getSeries");
}
@Action
public selectSerie(serie : Serie) {
console.log("Select serie !");
this.context.commit("setSerie",serie);
//this.();
this.context.dispatch("getClassrooms");
}
@Action
public selectClassroom(classroom : Classroom) {
console.log("Select classroom !");
this.context.commit("setClassroom",classroom);
//this.();
}
@Action
public getLevels() {
console.log("Get Levels !");
ipcRenderer.send ("module:classroom:levels:get");
ipcRenderer.on("module:classroom:levels:got",( event : Event,levels: Level[])=>{
levels = Level.from(levels)
this.context.commit("setLevels",levels )
this.context.dispatch("selectLevel",levels[0] )
//this.selectLevel(levels[0]);
})
}
@Action
public getSeries() {
console.log("Get series !");
ipcRenderer.send ("module:classroom:series:get",this.level);
ipcRenderer.on("module:classroom:series:got",(event : Event,series: Serie[])=>{
series = Serie.from(series)
this.context.commit("setSeries",series )
this.context.dispatch("selectSerie",series[0] )
})
}
@Action
public getClassrooms() {
console.log("Get Classrooms !");
ipcRenderer.send ("module:classroom:classrooms:get",this.serie);
ipcRenderer.on("module:classroom:classrooms:got",classrooms: Classroom[])=>{
classrooms = Classroom.from(classrooms)
this.context.commit("setClassrooms",classrooms )
this.context.dispatch("selectClassroom",classrooms[0] )
})
}
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）