Магазин Vuex не обновляется при изменении значений таблицы - PullRequest
Новая
       33

Магазин Vuex не обновляется при изменении значений таблицы

1 голос
/ 12 марта 2020

Я работаю над таблицей, используя Q-Popup-edit и Quue-store от Quasar Framework.

Заполняется правильно. Однако, когда я изменяю значения в таблице, он возвращается к своему текущему значению и не отображается вообще.

Вот моя таблица: 

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 ??

CodePen здесь: https://codepen.io/kzaiwo/pen/BaNYbZZ?editors=1011

Помощь!

Ответы [ 3 ]

1 голос
/ 12 марта 2020

Вы можете расширить свое вычисляемое свойство, используя вычисляемый метод получения и установки:

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

Ваш существующий код вычисления перемещается в функцию get. Заданная функция должна быть реализована.

0 голосов
/ 13 марта 2020

Я боюсь, что вам все равно придется использовать данные, как в документации. (Я пробовал метод вычисления вычислительных свойств, но он не будет работать)

Чтобы интегрировать его с магазином, вы можете использовать следующее решение: 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)
       }
     }
  }

Btw. Я думаю, что компонент QTable должен генерировать событие при изменении данных с обновленной структурой данных. (Или сделайте некоторые другие функции, чтобы включить обработку Vuex) Вероятно, стоит открыть PR с упоминанием этого обсуждения.

0 голосов
/ 13 марта 2020

Вы можете обратиться к этому URL https://vuex.vuejs.org/guide/mutations.html Вы найдете правильный способ изменить хранилище vuex.

...