javascript - 在 vuejs 中使用 Vuex 执行 CRUD 操作时出错

Question

我一直在尝试添加新注释，但每当我尝试添加它时，控制台就会返回

TypeError: _vm.addNote is not a function

和

Property or method "addNote" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

这是我的 vuex 代码:

<pre>
export default new Vuex.Store({
  state: {
    newNote:{},
    notes: [{
      poster: 'static/assets/logo.png',
      id: 1,
      title: 'sunt aut facere repellat provident occaecati', 
      body: 'this is the body of the post'
    }
  ],
  },
  mutations: {
    ADD_NOTE:(state) => {
      state.notes.push({
        title:this.newNote.title,
        body:this.newNote.body,
      })
      this.newNote={}
   },
  },
  actions: {
    addLink : function (store) {
      var commit = store.commit
      commit('ADD_NOTE')
    },
    }
})
</pre> 

这是我正在尝试添加新注释的组件: 每当我单击添加时，它都会控制台 addNote 不是一个函数

 1. List item


    <pre>
<form>
      <input id="text" type="text" v-modal="newNote.title">//this is where i want to add the title of the note

//this is where i want to add the body of the note`enter code here`  <textarea id="textarea1" class="materialize-textarea" v-modal="newNote.body"></textarea>
            <button type="submit" @click.prevent="addNote" class="btn blue">Add</button>
</form>

    <script>
    import { mapState , mapMutations, mapActions } from 'vuex'
    export default {
      name: "appnav",
      data() {
          return {
     newNote:{},
        computed: {
            ...mapState([
                'notes',
                'newNote'
            ]),
            ...mapActions([
                'addLink'
            ])
        },

      methods: {
          ...mapMutations([
             'ADD_NOTE' 
          ]),
          addNote () {
              this.ADD_NOTE(this.newNote)

          },
    } ,
    }
    }
    }
    </script>

Answer 1

您的问题在于调用 vuex 操作/突变的方式。

const methods = {
   addNote () {
        this.ADD_NOTE(this.newNote) // technically this will work but is not recommended 
        this.$store.dispatch('addNote') // ERROR
      }
};

请注意这些 API 之间的区别:

$store.dispatch.VUEX_ACTION - Vue 将在您商店的 Actions 处理程序中进行搜索，不会突变。

$store.commit.VUEX_MUTATION - Vue 将搜索您商店的 Mutations 处理程序，不操作。

鉴于此，您的错误是由于您的商店中没有将 addNote 函数定义为操作； addLink 是您定义的唯一操作。

另一方面 - 您尝试通过首先调用 this.addNote，然后调用 this.$store.dispatch 来连续两次执行相同的操作。如果您想让您的应用“面向 future ”，请不要在组件中使用 mapMutations，而仅使用 mapActions。随后，您的 vuex 操作将是唯一直接调用您的突变的函数。

文档中描述了存在此中间步骤的原因，如下:

Actions are triggered with the store.dispatch method:

store.dispatch('increment')

This may look silly at first sight: if we want to increment the count, why don't we just call store.commit('increment') directly? Remember that mutations have to be synchronous? Actions don't. We can perform asynchronous operations inside an action.

总而言之，突变必须是同步的。想象一下，您不是简单地向本地内存“添加注释”，而是向某些后端或外部数据库执行发布请求，这肯定不是同步例程，因此您必须重写 vuex 存储(和组件)来调度操作，而不是直接在组件中提交突变。