有没有办法在 q-table 中的 q-td 的 q-popup-edit 组件中的每个输入上触发 vuex 突变？答案

【问题标题】：Is there a way to trigger a vuex mutation on every input in a q-popup-edit component of a q-td in a q-table?有没有办法在 q-table 中的 q-td 的 q-popup-edit 组件中的每个输入上触发 vuex 突变？
【发布时间】：2020-02-10 13:49:55
【问题描述】：

我正在使用 vuex 的应用程序中使用 q-table。将弹出编辑添加到表格并在浏览器中编辑字段内容，我在控制台中收到这些错误和警告（见下文）。

应用程序按预期工作，但抛出了这些错误，但抛出了这些有趣的错误消息。我认为不仅要禁用严格模式，还要了解什么是正确的做法。

如何在用户输入到这个 q-popup-edit 时触发 vuex 突变，以使浏览器不会抛出这些错误消息？

我已尝试抑制没有实际意义的警告。

我已阅读文档 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)

编辑：（在 Guillaume Meral 在下面发表评论后，感谢您指出这个缺失的信息）

data prop 设置如下：

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

我希望能够捕获这些输入事件并调用 vuex 操作来正确地改变状态，从而消除错误/警告。但是这方面的文档似乎很少，也许我正在监督一些事情？

这是我在 Stackoverflow 上的第一个问题。如果我需要更新我的问题或更详细地指定任何内容，请告诉我。

感谢@community 的帮助。

**编辑：** 我第一个尝试的解决方案是向计算属性添加设置器，如下面的 Guillaume Meral 发布的链接中所述。

我已经实现了这个改变，看起来像这样：

  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)

旁注：在任何地方添加 JSON.parse(JSON.stringify(data)) 也无济于事^^

我不明白这里有什么问题。如果你愿意，请告诉我。

解决方案

Mapstate 为我解决了这个问题。在点击保存按钮之前，它确实抑制了文本输入字段中每次击键时的错误。

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

【问题讨论】：

如果没有看到 props.row.add 的方式，就不可能给出明确的答案。但是我怀疑它直接分配了商店的一部分状态。您需要做的是使用带有 getter 和 setter 部分的计算属性，如下所示：vuejs.org/v2/guide/computed.html#Computed-Setter 在 getter 中，您从存储中获取值，在 setter 中，您提交突变或调度操作。
data 属性是这样添加的：computed: { data: function () { return this.$store.getters['candidate/getCandidates'] } } 所以基本上我必须添加 getter 和 setter 才能使其工作（现在只是隐含的 getter）？
我已实施建议的更改，但错误消息仍然存在。我已经用更多细节更新了这个问题。
下一步是减少与 vuex 的交互，以准确查看问题出在哪里。您可以尝试将数据替换为 quasar 文档中的静态数组，以查看是否仍有错误。（顺便说一句，我真的不喜欢 data 这个名字，因为 vue 组件也有一个 data 属性。
我会试一试并在接下来的几天在这里提供结果

标签： vue.js axios vuex quasar-framework

【解决方案1】：

解决方案

Mapstate 为我解决了这个问题。在点击保存按钮之前，它确实抑制了文本输入字段中每次击键时的错误。

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

【讨论】：