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

我有一个函数，它从表行中获取值，并将其值设置为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计算属性和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

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，即我们只能获取或获取未设置值的值。

据我了解您的问题，您希望从表行获取值并将其添加到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);
        }
    }
});

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

2 个答案: