更改表值时Vuex Store不更新

Posted 2023-02-22

【中文标题】更改表值时Vuex Store不更新

【英文标题】：Vuex Store not updating when changing table values

【发布时间】：2020-06-24 09:37:24

【问题描述】：

我正在使用 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

救命！

【参考方案1】：

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

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

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

【讨论】：

我试图实现我的计算属性的 get/set 函数，但它似乎仍然不起作用。事实上，set 函数永远不会被调用。添加了 console.log，它根本不打印。我可能做错了什么？ CodePen 更新：codepen.io/kzaiwo/pen/BaNYbZZ?editors=1011

【参考方案2】：

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

【讨论】：

我已经用适当的突变和双向（get/set）计算属性更新了我的codepen。仍然没有更新:(帮助！

等我检查

【参考方案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 并提及这个讨论。