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

【问题标题】：Value of vuex getter not updating when switching between routed components在路由组件之间切换时 vuex getter 的值不更新
【发布时间】：2017-12-07 18:59:21
【问题描述】：

我有一个 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
        }
    }
});

我有一个函数，它从表行中获取值并将其值设置为我的 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 的效率还不够高，所以我不确定为什么这不起作用，我们将不胜感激。

【问题讨论】：

这是this.tabRow = list;你设置的值是什么意思？
是的 this.tabRow =list 是我更新 tabrows 值的方式

标签： vue.js vuex

【解决方案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. 检查你的第二个代码块：

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

据我了解您的问题，您希望从表行中获取值并将其添加到您的 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 商店中添加突变

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

【讨论】：

感谢您的帮助。
@DanielM96 好吧，首先回答的是 dev，向他致敬

【解决方案2】：

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

 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

【讨论】：

太棒了。这将指导你:)