[Vuejs]-Value of vuex getter not updating when switching between routed components

by

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

👤CuriousGuy

1👍

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);
        }
    }
});
👤Vamsi Krishna

Leave a comment