[Vue警告]：渲染错误：＆＃34; TypeError：state.actionInfo.find不是函数＆＃34;

Question

我使用vue.js的cli构建了一个简单的数据寄存器应用程序。我使用带有vue cli的lookback.js api。

这个应用程序有三页;显示，添加，编辑。

显示和添加页面工作正常但是当我尝试编辑表单中的现有数据时，我会为每个修改过的标签收到两个错误。

以下是其中一个表单元素，它通常是＆＃34; CMD_OPEN_GATE＆＃34;在DB（postgresql）;

当我打开页面控制台时，它没有任何错误，但是当我输入新内容时，它会显示这些错误;

[Vue warn]: Error in render: "TypeError: state.actionInfo.find is not a function"


TypeError: state.actionInfo.find is not a function

我在这里使用Vuex来获取价值。我不明白这些代码有什么问题。

此处还有代码;

形式：

<h3>Action Info</h3>
<input v-model.trim="actionInfo" class="form-control form-group" type="text" @input="$v.actionName.$touch()">

vuex＆＃39; store.js：

state: {
 actionInfo: [],
 .....
 .....
},
mutations: {
 actionInfoValue: (state, actionInfo) => {
  state.actionInfo = actionInfo
 },
},
getters: {
 getActionInfoByID (state) {
  return id => {
    return state.actionInfo.find(a => { return a.id === id })
  }
 }
}

此外，在编辑页面中我有这些代码。

methods: {
 actionInfoValue (val) {
  this.$store.commit('actionInfoValue', val)
 }
},
computed: {
 actionInfo: { // for action name
  get () {
    const i = this.$store.getters.getActionInfoByID(Number(this.$route.params.actionId))
    if (i) {
      return i.action
    }
    return ''
  },
  set (value) {
    this.$store.commit('actionInfoValue', value)
  }
 }
}

我该如何解决这个问题？我认为某些字符串数组不兼容存在问题。我阅读了stackoverflow中的每个主题，但我无法解决这个问题。

Answer 1

我找到了解决方案：

set (value) {
    this.$store.commit('actionInfoValueEdit', { id: Number(this.$route.params.actionId), action: value })
    // store.commit('addCustomer', { id: '2', name: 'User 2'})
  }

我编辑了这样的set方法并且它有效。

另外，我为此创建了一个新的突变;

actionInfoValueEdit: (state, actionInfo) => {
  state.actionInfo.push(actionInfo)
},

我从这里使用了推送功能。