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

Question

I have been trying to add a new note but whenever I try to add it the console returns

TypeError: _vm.addNote is not a function

and

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.

Here is my vuex code:

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

and this is my component that I'm trying to add a new note: whenever I click add it consoles addNote is not a function

 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

Your issue is in the way you are invoking the vuex actions/mutations.

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

Note the difference between these APIs:

$store.dispatch.VUEX_ACTION - Vue will search in your stores' Actions handlers, not mutations.

$store.commit.VUEX_MUTATION - Vue will search in your stores' Mutations handlers, not actions.

So given that, your error is due to the fact that you don't have an addNote function defined as an action in your store; addLink is the only action you have defined.

On a another note - you are attempting to perform the same operation twice in a row by first calling this.addNote , followed by this.$store.dispatch . If you want to "futureproof" your app, do not mapMutations in your component, only mapActions . Subsequently, your vuex actions will be the only function that directly invoke your mutations.

The reason why there is this intermediate step is described in the documentation and is as follows:

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.

So to summarize, mutations must by synchronous. Imagine that instead of simply 'adding a note' to your local memory you are performing a post request to some backend or external database, this would certainly not be a synchronous routine and thus you have to rewrite your vuex store (and components) to dispatch actions instead of committing mutations directly in your components.