Issue Resolved: Incorrect Variable Being Used
I encountered an issue where I was unable to access a stored value after mutating it in a component. Initially, I would select an array of numbers from a list, which would then be stored in the store upon pressing a button. However, when attempting to retrieve the value from the store, it appeared empty.
Here is my Vue Component:
<template>
<MultiSelect
class="groupselect"
v-model="localSelectedNumbers"
:options="options"
optionLabel="id"
placeholder="Choose Devices"
/>
<v-btn @click="refresh()">Click</v-btn>
<p>{{selectedNumbers}}</p>
</template>
<script>
import MultiSelect from "primevue/multiselect";
import {mapMutations, mapState} from "vuex";
export default {
name: "DeviceSelection",
components: {MultiSelect},
computed: {
...mapState([
'mode',
'selectedNumbers',
'options'
])
},
data() {
return {
localSelectedNumbers: [],
show: []
}
},
watch: {
selectedNumbers(newValue, oldValue) {
this.show = newValue
}
},
methods: {
...mapMutations([
'setRows'
]),
refresh() {
this.setRows(JSON.parse(JSON.stringify(this.localSelectedNumbers)))
//console.log(this.selectedNumbers)
}
}
}
</script>
Overview of My Store setup:
import {createStore} from "vuex";
const store = createStore({
state() {
return {
options : [
{id:1}, {id:2}, {id:3}
],
rows: [],
mode: false,
selectedNumbers: []
}
},
mutations: {
setRows(state, payload) {
console.log(state.rows)
state.rows = payload
console.log(state.rows)
},
}
export default store;
I have attempted various solutions including using watchers and manual refreshing. Despite seeing the correct output in the console log for the Store (with numbers 1 and 2), the `selectedNumbers` variable in the Vue Component remains empty as does `this.$store.state.selectedNumbers` when accessed within the component.