The variables startStopA... and InitialValueA... that were originally in the component TableFields.vue need to be relocated to the store file index.js. However, upon moving them to the store, an error appears stating that setters are not set. I have extensively consulted the documentation and attempted various solutions, but I have been unsuccessful in resolving the issue.
Component TableFields.vue
<template>
<div>
<div class="wrapper" v-for="(field, index) in fields" :key="index">
<table>
<tr>
<th>{{ field }}</th>
<td class="sign">{{ randomSign[index] }}</td>
<td class="value">{{ initialValues[index].toFixed(2) }}</td>
<td v-show="$store.state.randomSign[index] === '+'">⬆</td>
<td v-show="$store.state.randomSign[index] === '-'">⬇</td>
</tr>
</table>
<button
@click="toggleInterval(field)"
v-if="field === 'A'"
:class="[startStopA ? 'button-start' : 'button-stop']"
>
<span v-show="startStopA">Stop</span>
<span v-show="!startStopA">Start</span>
</button>
<button
@click="toggleInterval(field)"
v-if="field === 'B'"
:class="[startStopB ? 'button-start' : 'button-stop']"
>
<span v-show="startStopB">Stop</span>
<span v-show="!startStopB">Start</span>
</button>
<button
@click="toggleInterval(field)"
v-if="field === 'C'"
:class="[startStopC ? 'button-start' : 'button-stop']"
>
<span v-show="startStopC">Stop</span>
<span v-show="!startStopC">Start</span>
</button>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'TableFields',
data () {
return {
startStopA: true,
startStopB: true,
startStopC: true,
initialValueA: 3,
initialValueB: 3,
initialValueC: 3,
arraysInterval: null
};
},
computed: {
...mapState([
'changes',
'timer',
'fields',
'signs',
'randomSign',
'randomNumbers'
]),
initialValues () {
let array;
array = [
this.initialValueA,
this.initialValueB,
this.initialValueC
];
return array;
}
},
methods: {
...mapMutations(['replaceNumbersArray']),
toggleInterval (field) {
// button toggle
if (field === 'A') {
this.startStopA = !this.startStopA;
if (this.startStopA) {
this.timer[0] = setInterval(() => {
this.calculations('A');
}, 2000);
} else {
clearInterval(this.timer[0]);
}
}
if (field === 'B') {
this.startStopB = !this.startStopB;
if (this.startStopB) {
this.timer[1] = setInterval(() => {
this.calculations('B');
}, 2000);
} else {
clearInterval(this.timer[1]);
}
}
if (field === 'C') {
this.startStopC = !this.startStopC;
if (this.startStopC) {
this.timer[2] = setInterval(() => {
this.calculations('C');
}, 2000);
} else {
clearInterval(this.timer[2]);
}
}
if (!this.startStopA && !this.startStopB && !this.startStopC) {
clearInterval(this.arraysInterval);
}
},
calculations (field) {
this.fields.forEach((value, index) => {
if (field === value) {
this.randomSign[index] = this.signs[
Math.floor(Math.random() * this.signs.length)
];
const date = new Date();
const newChange = [];
newChange.field = field;
newChange.indicator = this.randomSign[index];
newChange.value = this.randomNumbers[index];
newChange.time = date.toLocaleTimeString();
this.changes[index].push(newChange);
}
});
if (field === 'A') {
this.randomSign[0] === '+'
? (this.initialValueA += this.randomNumbers[0])
: (this.initialValueA -= this.randomNumbers[0]);
}
if (field === 'B') {
this.randomSign[1] === '+'
? (this.initialValueB += this.randomNumbers[1])
: (this.initialValueB -= this.randomNumbers[1]);
}
if (field === 'C') {
this.randomSign[2] === '+'
? (this.initialValueC += this.randomNumbers[2])
: (this.initialValueC -= this.randomNumbers[2]);
}
}
},
beforeUpdate () {
const array = [this.startStopA, this.startStopB, this.startStopC];
array.forEach((value, index) => {
if (!value) {
clearInterval(this.timer[index]);
}
});
},
mounted () {
console.log(`${this.changes}`);
this.arraysInterval = setInterval(this.replaceNumbersArray, 2000);
this.fields.forEach((value, index) => {
this.timer[index] = setInterval(() => {
this.calculations(value);
}, 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;
},
beforeDestroy () {
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(value => {
clearInterval(value);
});
}
};
</script>
File store/index.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
changes: [],
timer: [0, 0, 0],
fields: ['A', 'B', 'C'],
signs: ['+', '-'],
randomSign: ['+', '+', '+'],
randomNumbers: []
},
mutations: {
replaceNumbersArray (state) {
// Replaces random A, B, C... numbers at specified time intervals
const A = Number((Math.random() + 1).toFixed(2)); // first number A
const B = Number((Math.random() + 1).toFixed(2)); // first number B
const C = Number((Math.random() + 1).toFixed(2)); // first number C
state.randomNumbers.splice(0, 3, A, B, C);
console.log(state.randomNumbers);
}
}
});
export default store;
GitHub repository:
https://github.com/SrdjanMilic/Super-Dynamic-Data
Codesandbox link:
https://codesandbox.io/s/super-dynamic-data-djpxe