Value of vuex getter not updating when switching between routed components - vue.js

Question

I have a vuex getter that takes the value of an array from my state.
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
tableRow: [
{
"name": 1,
"numSongs": 2,
"Year": 3
}
]
},
getters:{
tRow : state => {
return state.tableRow
}
}
});
I have a function that takes the values from a table row and sets the value of it to my computed property for the getter.
$("#table1 tr").click(function () {
var list = [];
var $row = $(this).closest("tr"),
$tds = $row.find("td");
list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() });
// self.$store.state.tableRow = list;
this.tabRow = list;
console.log(this.tabRow);
self.passData();
});
});
},
computed: {
tabRow(){
return this.$store.getters.tRow;
}
},
Then in another one of my routed components i set the same computed property and then try to call it in the template but the value it outputs is the default values i gave it.
mounted: function () {
var self = this;
console.log(this.tabRow)
// self.passedRow = self.$store.state.tableRow;
self.passedRow = this.tabRow;
this.startDoughnut(this.$refs.canvas, 'Doughnut');
},
computed: {
tabRow(){
return this.$store.getters.tRow;
}
I am not properly efficient with vuex yet so i am not sure why this won't work any help would be appreciated.

Answer 1

What you are trying to do here is not possible in vue compute property and also in Vuex. Computed properties and vuex getters areread only.
this.tabRow = list;
======================
computed: {
tabRow(){
return this.$store.getters.tRow;
}
Do this
computed: {
tabRow(){
get: function () {
return this.$store.getters.tRow;
},
set: function (newValue) {
commit('SET_TABLEROW', newValue)
});
}
}
In store add a mutation
mutations:{
SET_TABLEROW: (state,list) => {
state.tableRow=list
}
}
refer https://vuex.vuejs.org/en/mutations.html

Answer 2

I have a function that takes the values from a table row and sets the value of it to my computed property for the getter.
Examining your second block of code:
You are trying to set the value of list to the computed property tabRow. Computed properties are by default getter-only, i.e we can only get or acess a value not set a value.
As far as I understood your problem you want to take the value from the table row and add it to the tableRow property in your vuex state. For that you need a mutation
$("#table1 tr").click(function () {
var $row = $(this).closest("tr"),
$tds = $row.find("td");
var list = { name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() };
self.$store.commit('addTableRow', list);
self.passData();
});
In you vuex store add the mutation
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
tableRow: [
{
"name": 1,
"numSongs": 2,
"Year": 3
}
]
},
getters:{
tRow : state => {
return state.tableRow
}
},
mutations: {
addTableRow: (state, list) => {
state.tableRow.push(list);
}
}
});