在路由组件之间切换时 vuex 的值 getter 不更新

Question

我有一个 vuex getter 从我的状态中获取数组的值。

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
        }
    }
});

我有一个函数，它从 table 行获取值并将其值设置为我为 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;
    }
},

然后在我的另一个路由组件中我设置相同的计算属性然后尝试在模板中调用它但它输出的值是我给它的默认值。

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;
    }

我对 vuex 的效率还不够高，所以我不确定为什么这不起作用任何帮助将不胜感激。

Answer 1

你在这里尝试做的事情在 vue compute 属性和 Vuex 中是不可能的。计算属性和 vuex getters 是只读的。

 this.tabRow = list;
======================
 computed: {
    tabRow(){
     return this.$store.getters.tRow;
    }

这样做

computed: {
  tabRow(){
    get: function () {
      return this.$store.getters.tRow;
    },
    set: function (newValue) {
      commit('SET_TABLEROW', newValue)
    });
    }
   }

店内添加变体

 mutations:{
        SET_TABLEROW: (state,list) => {
            state.tableRow=list
        }
    }

参考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. 检查您的第二个代码块：

您正在尝试将 list 的值设置为计算的属性 tabRow。 Computed properties 默认为 getter-only，即我们只能获取或访问一个值而不能设置一个值。

据我了解你的问题，你想从 table 行中获取值并将其添加到你的 vuex 状态中的 tableRow 属性中。为此你需要一个 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();
});

在你的 vuex store 添加 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);
        }
    }
});

在路由组件之间切换时 vuex 的值 getter 不更新

Value of vuex getter not updating when switching between routed components

vue.js

vuex