Блог

Я начал проект создания заметок с помощью vue-cli и vuex. Я все настроил правильно, и все работает нормально, кроме того, когда я добавляю новую заметку в vuex store — notelist, она добавляется, и это нормально, но когда я меняю значение в поле ввода, мое значение хранилища vuex также обновляется, ничего не фиксируя.

вот код —

 <template>
    <div>
       {{title}}
        <input type="text" v-model="note.msg">
        <button v-on:click="addNote()">ADD</button>
    </div> 
</template>
<script>
module.exports = { 
  data() {
    return {  
       title:'Add node', 
       note: {
           msg: this.msg,
           avatar:'wolf'
        }
    }
  }, 
  methods: { 
    addNote(){  
        this.$store.dispatch("updateNotes",this.note);
    }
  },  
}
</script>
<style scoped> 
</style>
  

Когда я изменяю входное значение после добавления своих заметок, оно обновляется в хранилище vuex, а также в другом компоненте, где я отображаю список.

что я пробовал, так это то, что вместо того, чтобы делать note.msg как v-model, я изменил его на msg, и объект данных и вычисляемое свойство были соответствующим образом обновлены, и это устранило мою проблему —

 <template>
    <div>
       {{title}}
        <input type="text" v-model="msg">
        <button v-on:click="addNote()">ADD</button>
    </div> 
</template>
<script>
module.exports = { 
  data() {
    return {  
       title:'Add node', 
        msg:''
    }
  }, 
  methods: { 
    addNote(){ 
        let note = {
            msg: this.msg,
            avatar:'wolf'
        };
        this.$store.dispatch("updateNotes",note);
    }
  },  
}
</script>
<style scoped> 
</style>
  

Технически у меня нет никаких проблем, просто я не мог разобраться в этом. Я не ожидал, что это произойдет. Я ожидал второго поведения, а не первого.

Редактировать

action.js

 const updateNotes = (context, payload) => {
    context.commit('updateNotes', payload);
}

export default {  
    updateNotes,
};
  

mutation.js

 const updateNotes = (state, data) => {
    state.notes.push(data);
}

export default { 
    updateNotes
};
  

Это изменения и действия в моем проекте.

Когда updateNote действие отправляется в первый раз, оно непреднамеренно создает соединение между input v-model ( this.note ) и состоянием Vuex notes .

В JavaScript объекты передаются по ссылке, что означает, что когда вы присваиваете переменной объект JavaScript, он не создает новую копию, фактически обе переменные указывают на один и тот же точный объект. Изменение одного меняет другое. (Это не имеет ничего общего с Vue / Vuex и верно для ванильного JavaScript.)

Поэтому, когда вы переходите this.note к Vuex, добавленный вами элемент не является уникальным объектом, он точно такой же, который используется в компоненте. И так будет для каждого добавляемого вами объекта. Все они указывают на входные данные, потому что действие продолжает передавать ссылку this.note .

Причина, по которой этого не происходит в вашем исправлении, заключается в том, что вы каждый раз создаете совершенно новый объект addNote и передаете его. Так что это ни к чему не связано.

Если бы вы использовали Vuex в strict режиме mode, Vuex выдал бы ошибку при этом:

Ошибка: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций.

Вы можете включить strict режим при определении хранилища:

 const store = new Vuex.Store({
  strict: true,  // Turning on strict mode
  state: {
    note: null
  }
}