Javascript 设置getter和setter

变量

startStopA…

和

InitialValueA…

来自

TableFields.vue

应移动到存储

index.js

。当您将其移动到存储时，会出现一个错误“设置器未设置…”。我读过一份文档，我尝试了我能想到的一切，但没有成功地把它设置好

TableFields.vue

组件

{{field}}
{{randomSign[index]}
{{initialValues[index].toFixed（2）}
⬆；
⬇；
停止
开始
停止
开始
停止
开始
从“vuex”导入{mapState，mapstations}；
导出默认值{
名称：'TableFields'，
数据（）{
返回{
答：是的，
是的，
是的，
初始值A:3，
初始值B:3，
初始值C:3，
arraysInterval:null
};
},
计算：{
…地图状态([
"变化",，
“计时器”，
“字段”，
“标志”，
“随机符号”，
“随机数字”
]),
初始值（）{
let数组；
数组=[
这是A，
这是b.initialValueB，
这是初始值
];
返回数组；
}
},
方法：{
…映射突变（['replaceNumbersArray']），
切换间隔（字段）{
//按钮切换
如果（字段=='A'）{
this.startStopA=！this.startStopA；
如果（此.startStopA）{
this.timer[0]=setInterval（（）=>{
本节为计算（‘A’）；
}, 2000);
}否则{
clearInterval（这个.timer[0]）；
}
}
如果（字段=='B'）{
this.startStopB=！this.startStopB；
如果（此.startStopB）{
this.timer[1]=setInterval（（）=>{
本节为计算（‘B’）；
}, 2000);
}否则{
clearInterval（这个.timer[1]）；
}
}
如果（字段=='C'）{
this.startStopC=！this.startStopC；
如果（此.startStopC）{
this.timer[2]=setInterval（（）=>{
本节为计算（‘C’）；
}, 2000);
}否则{
clearInterval（这个.timer[2]）；
}
}
如果（！this.startStopA&&！this.startStopB&&！this.startStopC）{
clearInterval（this.arraysInterval）；
}
},
计算（现场）{
this.fields.forEach（（值，索引）=>{
如果（字段==值）{
this.randomSign[索引]=this.signs[
Math.floor（Math.random（）*this.signs.length）
];
const date=新日期（）；
常量newChange=[]；
newChange.field=字段；
newChange.indicator=this.randomSign[index]；
newChange.value=this.randomNumbers[索引]；
newChange.time=date.toLocaleTimeString（）；
this.changes[index].push（newChange）；
}
});
如果（字段=='A'）{
此.randomSign[0]=='+'
？（this.initialValueA+=this.randomNumbers[0]）
：（this.initialValueA-=this.randomNumbers[0]）；
}
如果（字段=='B'）{
此.randomSign[1]=='+'
？（this.initialValueB+=this.randomNumbers[1]）
：（this.initialValueB-=this.randomNumbers[1]）；
}
如果（字段=='C'）{
此.randomSign[2]=='+'
？（this.initialValueC+=this.randomNumbers[2]）
：（this.initialValueC-=this.randomNumbers[2]）；
}
}
},
更新之前（）{
常量数组=[this.startStopA，this.startStopB，this.startStopC]；
array.forEach（（值，索引）=>{
如果（！值）{
clearInterval（这个.timer[索引]）；
}
});
},
挂载（）{
log（`${this.changes}`）；
this.arraysInterval=setInterval（this.replaceNumbersArray，2000）；
this.fields.forEach（（值，索引）=>{
this.timer[index]=setInterval（（）=>{
这是计算（价值）；
}, 2000);
});
this.initialValueA=this.$root.initialValueA | | 3；
this.initialValueB=this.$root.initialValueB | | 3；
this.initialValueC=this.$root.initialValueC | | 3；
this.startStopA=！this.$root.startStopA | | |！this.startStopA；
this.startStopB=！this.$root.startStopB | | |！this.startStopB；
this.startStopC=！this.$root.startStopC | | |！this.startStopC；
},
在销毁之前（）{
clearInterval（this.arraysInterval）；
this.$root.initialValueA=this.initialValueA；
this.$root.initialValueB=this.initialValueB；
this.$root.initialValueC=this.initialValueC；
this.$root.startStopA=！this.startStopA；
this.$root.startStopB=！this.startStopB；
this.$root.startStopC=！this.startStopC；
this.timer.forEach（值=>{
清除间隔（值）；
});
}
};

store/index.js

文件：

从“Vue”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；
const store=新的Vuex.store({
声明：{
更改：[]，
计时器：[0,0,0]，
字段：['A'，'B'，'C']，
符号：['+'，'-']，
随机符号：['+'，'+'，'+']，
随机数字：[]
},
突变：{
替换编号阵列（状态）{
//按时间间隔替换随机A、B、C…数字
常数A=数字（（Math.random（）+1.toFixed（2））；//第一个数字A
常数B=数字（（Math.random（）+1.toFixed（2））；//第一个数字B
常数C=Number（（Math.random（）+1.toFixed（2））；//第一个数字C
状态。随机数。拼接（0，3，A，B，C）；
console.log（state.randomNumber）；
}
}
});
导出默认存储；

GitHub回购：

代码沙盒：

---

您需要为每个要变异的计算属性实现一个setter，因为在Vuejs中，默认情况下计算属性仅为getter：

VueJS文档：

默认情况下，计算属性仅为getter，但您也可以在需要时提供setter

类似于th的计算属性