Vuex 存储值在不提交的情况下得到更新答案

【问题标题】：Vuex store values getting update without comittingVuex 存储值在不提交的情况下得到更新
【发布时间】：2021-03-04 11:44:51
【问题描述】：

我用 vue-cli 和 vuex 开始了一个笔记项目。我已经正确设置了所有内容，并且一切正常，除了当我在 vuex 存储中添加一个新注释 - 注释列表时，它会被添加，这很好，但是当我更改输入字段中的值时，我的 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
};

这些是我项目中的突变和操作。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

当updateNote 动作第一次被分派时，它无意中在输入的v-model (this.note) 和Vuex 状态notes 之间创建了一个连接。

在 JavaScript 中，对象是通过 reference 传递的，这意味着当您将 JavaScript 对象分配给一个变量时，它不会重新创建一个副本，它实际上使两个变量指向同一个目的。改变一个改变另一个。（这与 Vue/Vuex 无关，在原生 JavaScript 中也是如此。）

因此，当您将 this.note 传递给 Vuex 时，您添加的项目不是唯一的对象，它与组件中使用的完全相同。对于您添加的每个对象，它都是这样的。它们都指向输入，因为操作不断将引用传递给this.note。

它没有在您的修复中发生的原因是因为您每次在 addNote 中创建一个全新的对象，然后传递它。所以它没有连接到任何东西。

如果你在 strict 模式下使用 Vuex，Vuex 会在此抛出错误：

错误：[vuex] 不在突变处理程序之外改变 vuex 存储状态。

定义商店时可以开启strict mode：

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

【讨论】：