Vue.js 有没有办法在q表中q-td的q-popup-edit组件中的每个输入上触发vuex突变？

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

应用程序按预期工作，但抛出了这些错误，但抛出了这些有趣的错误消息。我认为这是一个必要的学习，不仅要禁用严格模式，而且要理解什么是正确的方法来做到这一点

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

我试图压制这种毫无意义的警告

我已经阅读了文件

它不包含对用户输入的任何回调函数的引用

...
<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)

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

这是我关于Stackoverflow的第一个问题。请让我知道，如果我需要更新我的问题或指定任何更详细的内容

感谢您对@community的帮助

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

我实施了这一更改，如下所示：

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

  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)

---

解决方案

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

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

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

---

如果不了解props.row.added的方式，就不可能给出明确的答案。但是我怀疑它直接被分配了商店的一部分状态。您需要做的是使用具有getter和setter部分的computed属性，如下所示：在getter中，您从存储中获取值，在setter中，您提交一个变异或分派一个操作。数据属性是这样添加的：

computed:{data:function（）{return this.$store.getters['candidate/getCandidates']}

因此，基本上我必须添加getter和setter才能使其工作（现在隐式地只是getter）？我已经实现了建议的更改，但错误消息仍然存在。我已经更新了问题的一些细节。下一步你将减少与vuex的交互，看看问题的确切来源。您可以尝试用一个静态数组替换数据，如quasar文档中的数据，以查看是否仍然存在错误。（顺便说一句，我确实不喜欢名称

data

，这让人困惑，因为vue组件也有数据属性。我将尝试一下，并在接下来的几天在这里提供结果。）