Есть ли способ вызвать мутацию vuex на каждом входе в компоненте q-popup-edit q-td в q-таблице? - PullRequest
Новая
       33

Есть ли способ вызвать мутацию vuex на каждом входе в компоненте q-popup-edit q-td в q-таблице?

0 голосов
/ 14 октября 2019

Я работаю с q-таблицей в приложении с vuex. Добавляя всплывающее окно редактирования в таблицу и редактируя содержимое полей в браузере, я получаю эти ошибки и предупреждения в консоли (см. Ниже).

Приложение работает, как и ожидалось, но выдает эти ошибки, но выдает эти забавные сообщения об ошибках. Я думаю, что это необходимое обучение, чтобы не просто отключить строгий режим, но и понять, как правильно сделать это.

Как я могу вызвать мутацию vuex при вводе пользователя в это q-popup-edit вспособ, которым браузер не будет выдавать эти сообщения об ошибках?

Я пытался подавить предупреждение, которое не имеет реального смысла.

Я прочитал документацию https://quasar.dev/vue-components/popup-edit

, котораяне содержит ссылок на какие-либо функции обратного вызова для пользовательского ввода 

...
<template>
  <div class="q-pa-md">
    <q-table
      title="Bewerber"
      :data="data"
      :columns="columns"
      row-key="id"
      binary-state-sort
      separator="cell"
      selection="single"
      :selected.sync="selected"
    >
    <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-checkbox dense v-model="props.selected" />
          </q-td>
          <q-td key="id" :props="props">
            {{ props.row.id }}
          </q-td>
          <q-td key="added" :props="props">
            {{ props.row.added }}
            <q-popup-edit v-model="props.row.added" buttons @save="saveRow(props.row)">
              <q-input type="text"  v-model="props.row.added" dense autofocus counter />
            </q-popup-edit>
          </q-td>

...



vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
run @ vue.runtime.esm.js?2b0e:4564
update @ vue.runtime.esm.js?2b0e:4536
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
set @ vue.runtime.esm.js?2b0e:1077
callback @ list.vue?994d:645
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3882
emitValueFn @ QInput.js?27f9:145
emitValue @ QInput.js?27f9:162
onInput @ QInput.js?27f9:126
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:774)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at Watcher.update (vue.runtime.esm.js?2b0e:4536)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as address_line_1] (vue.runtime.esm.js?2b0e:1055)
    at Proxy.set (vue.runtime.esm.js?2b0e:1077)
    at callback (list.vue?994d:645)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)

EDIT: (после комментария Гийома Мераля, спасибо за указание на эту недостающую информацию)

data prop устанавливается следующим образом: 

computed: {
    data: function () {
      return this.$store.getters['candidate/getCandidates']
    }
  },

Я ожидаю, что смогу перехватить эти входные события и вызвать действие vuex, чтобы должным образом изменить состояние и тем самым избавиться от ошибок / предупреждений. Но, похоже, документации по этому поводу немного, может, я что-то наблюдаю?

Это мой первый вопрос по Stackoverflow. Пожалуйста, дайте мне знать, если мне нужно обновить мой вопрос или указать что-нибудь более подробно.

Спасибо за вашу помощь @ сообщество.

** РЕДАКТИРОВАТЬ: ** моей первой попыткой было добавитьустановщики для вычисляемого свойства, как описано в ссылке, размещенной Гийомом Мералем ниже.

Я реализовал это изменение, похожее на это: 

  computed: {
    data: {
      // getter
      get: function () {
        return this.$store.getters['candidate/getCandidates']
      },
      // setter
      set: function (newData) {
        this.$store.dispatch('candidate/updateCandidateList', newData)
      }
    }
  },

с действием 

export function updateCandidateList (state, data) {
  state.commit('setCandidates', data)
}

и мутация 

export function setCandidates (state, data) {
  if (data) {
    state.candidates = JSON.parse(JSON.stringify(data))
  } else {
    state.candidates = null
  }
}

и состояние 

export default {
  candidates: []
}

Все еще предупреждения сохраняются в консоли 

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."(found in <Root>)

vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:774)
    at Watcher.run (vue.runtime.esm.js?2b0e:4562)
    at Watcher.update (vue.runtime.esm.js?2b0e:4536)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as added] (vue.runtime.esm.js?2b0e:1055)
    at Proxy.set (vue.runtime.esm.js?2b0e:1077)
    at callback (list.vue?994d:93)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)

sidenote:также добавление JSON.parse (JSON.stringify (data)) в любом месте не поможет ^^

Я не понимаю, что здесь не так. Дайте мне знать, если вы это сделаете, пожалуйста.

РЕШЕНИЕ

Mapstate решила проблему для меня. Он подавляет ошибки при каждом нажатии клавиши в поле ввода текста перед нажатием кнопки сохранения. 

  computed: {
    ...mapState('candidate', {
      data: state => state.candidate
    })
  },

1 Ответ

0 голосов
/ 26 октября 2019

РЕШЕНИЕ

Mapstate решил проблему для меня. Он подавляет ошибки при каждом нажатии клавиши в поле ввода текста до нажатия кнопки сохранения. 

  computed: {
    ...mapState('candidate', {
      data: state => state.candidate
    })
  },
...