Question

我一直在尝试添加新笔记，但是每当我尝试添加笔记时，控制台都会返回

TypeError：_vm.addNote不是函数

和

属性或方法“ addNote”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

这是我的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。如果要“面向未来”应用，请不要在组件中mapMutations mapActions。随后，您的vuex动作将是唯一直接调用您的变异的功能。

此中间步骤的原因在文档中进行了描述，如下所示：

使用store.dispatch方法触发动作：

store.dispatch（'increment'）

乍一看，这似乎很愚蠢：如果我们想增加计数，为什么不直接调用store.commit（'increment'）？还记得突变必须是同步的吗？动作不行。我们可以在一个动作中执行异步操作。

总而言之，突变必须通过同步来实现。想象一下，您不是向本地后端或外部数据库执行发布请求，而不仅仅是在本地内存中添加注释，这肯定不是同步例程，因此您必须重写vuex存储（和组件）以进行分派采取行动，而不是直接在组件中进行突变。

在vue.js中使用Vuex执行CRUD操作时出错

1 个答案: