Question

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

该应用程序可以正常运行，但是会引发这些错误，但会引发这些有趣的错误消息。我认为这不仅是禁用严格模式，而且是了解执行此操作的正确方法的必要学习。

如何在用户输入此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的评论之后，谢谢您指出此丢失的信息）

数据属性设置如下：

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

我希望能够捕获这些输入事件并调用vuex动作以正确地改变状态，从而摆脱错误/警告。但是似乎没有关于这方面的文档，也许我正在监督一些事情？

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

感谢您对@community的帮助。

**编辑：**我第一个尝试的解决方案是将setter添加到计算属性中，如下面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
    })
  },

Answer 1

解决方案

Mapstate为我解决了这个问题。在按下保存按钮之前，它确实可以消除在文本输入字段中进行的每次击键错误。

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

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

1 个答案: