Ошибка выполнения операции CRUD с использованием Vuex в vuejs

Question

Я пытался добавить новую заметку, но всякий раз, когда я пытаюсь добавить ее, консоль возвращает

TypeError: _vm.addNote не является функцией

и

Свойство или метод "addNote" не определен в экземпляре, но на него ссылаются во время визуализации. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Вот мой код 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')
    },
    }
})

и это мой компонент, который я пытаюсь добавить новую заметку: всякий раз, когда я нажимаю «добавить», консоль 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 будет искать в ваших магазинах ' Действия обработчики, не мутации.

$ store.commit.VUEX_MUTATION - Vue будет искатьв ваших магазинах Мутации обработчики, не действия.

Так, учитывая, что ваша ошибка связана с тем, что у вас нет addNote функция, определенная как действие в вашем магазине; addLink - это единственное действие, которое вы определили.

В другой заметке - вы пытаетесь выполнить одну и ту же операцию дважды подряд, сначала вызвав this.addNote, а затем this.$store.dispatch,Если вы хотите, чтобы ваше приложение защищало будущее, не указывайте в своем компоненте mapMutations, а только mapActions.Впоследствии ваши действия vuex будут единственной функцией, которая будет напрямую вызывать ваши мутации.

Причина, по которой существует этот промежуточный шаг, описана в документации и выглядит следующим образом:

Действиязапускаются с помощью метода store.dispatch:

store.dispatch ('increment')

Это может выглядеть глупо на первый взгляд: если мы хотим увеличить счетпочему бы нам просто не вызвать store.commit ('increment') напрямую?Помните, что мутации должны быть синхронными?Действия не делают.Мы можем выполнять асинхронные операции внутри действия.

Таким образом, чтобы подвести итог, мутации должны синхронными.Представьте себе, что вместо простого «добавления заметки» в локальную память вы выполняете пост-запрос к какой-либо внутренней или внешней базе данных, это, безусловно, не будет синхронной подпрограммой, и поэтому вам придется переписать хранилище vuex (и компоненты) для отправкидействия вместо фиксации мутаций непосредственно в ваших компонентах.