更改表值时Vuex Store不更新

Question

我正在使用 Quasar 框架的 Q-Popup-edit 和 Vuex Store 处理表格。

它正确填充。但是，当我更改表上的值时，它会恢复到当前值并且根本没有反映。

这是我的桌子：

tableData: [
        {
          'FrozenYogurt' : {
            'topping': 'strawberry'
          },
          'FrozenYogurtPart2' : {
            'topping2': 'strawberry2'
          }
        },
        {
          'IceCreamSandwich' : {
            'baseFlavor': 'chocolate',
            'somethingAgain': 'chocolatiest'
          }
        },
        {
          'CreamPuff' : {
            'sourceBakery': 'Starbucks'
         }
        }
      ]

我的 Vuex 突变：

  mutations: {
    saveUpdatedData (newVal) {
      console.log('inside MUTATION saveUpdatedData')
      state.tableData.length = 0
      state.tableData.push(newVal)
    }
  }

并使用双向计算属性（get/set）来填充表格：

    tableRows: {
      get: function () {
        console.log('inside GET')    
        return this.$store.state.tableData.reduce((acc, item) => {
          Object.keys(item).forEach(name => {
            Object.keys(item[name]).forEach(property => {
              acc.push({ name, property, value: item[name][property]})
            })
          })
          return acc
        }, [])
      },
      set: function (newValue) {
        console.log('inside SET')
        this.$store.commit('saveUpdatedData', newValue)
      }
    }

但是set() 函数根本没有被调用。

最后是我的 Vue 代码：

     <q-table
        :data="tableRows"
        :columns="columns"
        :rows-per-page-options="[]"
        row-key="name" wrap-cells>

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="desc" :props="props">
              {{ props.row.name }}
              <q-popup-edit v-model="props.row.name" buttons>
                <q-input v-model="props.row.name" dense autofocus counter ></q-input>
              </q-popup-edit>
            </q-td>

            <q-td key="property" :props="props">
              {{ props.row.property }}
              <q-popup-edit buttons v-model="props.row.property">
                <q-input type="textarea" v-model="props.row.property" autofocus counter @keyup.enter.stop></q-input>
              </q-popup-edit>
            </q-td>

            <q-td key="value" :props="props">
              {{ props.row.value }}
              <q-popup-edit v-model="props.row.value" buttons>
                <q-input v-model="props.row.value" dense autofocus ></q-input>
              </q-popup-edit>
            </q-td>

          </q-tr>
        </template>
      </q-table>

如何使更改反映在 vuex 商店中？？

这里的代码笔： https://codepen.io/kzaiwo/pen/BaNYbZZ?editors=1011

救命！

Answer 1

你可以使用计算的 getter 和 setter 来扩展你的计算属性：

https://vuejs.org/v2/guide/computed.html#Computed-Setter

您现有的计算代码移至 get 函数。 需要实现set函数。

Answer 2

你可以参考这个网址https://vuex.vuejs.org/guide/mutations.html 你会找到改变 vuex 存储的正确方法。

Answer 3

恐怕您仍然必须像文档中那样使用数据道具。 （我尝试过计算属性设置器，但它不起作用）

要将其与商店集成，您可以使用以下解决方案：https://codepen.io/woothu/pen/VwLXzNQ?editors=1011

  data () {
    return {
columns: [
  { name: 'desc', align: 'left', label: 'Data Element', field: 'desc', sortable: true, style: 'min-width: 180px; max-width: 180px;' },
  { name: 'property', align: 'center', label: 'Property', field: 'property', sortable: true, style: 'min-width: 20px; max-width: 20px;' },
  { name: 'value', align: 'left', label: 'Value', field: 'value', sortable: true, style: 'min-width: 300px; max-width: 300px; word-wrap: break-word; font-family: Consolas; font-size: 13px' }
],
   tableRows: null
    }
  },
  beforeMount () {
    this.tableRows = this.$store.state.tableData.reduce((acc, item) => {
      Object.keys(item).forEach(name => {
        Object.keys(item[name]).forEach(property => {
          acc.push({ name, property, value: item[name][property]})
        })
      })
      return acc
    }, [])
  },
  watch: {
     tableRows: {
       deep: true,
       handler (val) {      
         this.$store.commit('saveUpdatedData', val)
       }
     }
  }

顺便说一句。我认为 QTable 组件在使用更新的数据结构更改数据时应该发出事件。 （或者制作一些其他功能来启用处理 Vuex）可能值得打开 PR 并提及这个讨论。