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

Posted 2023-02-22

【中文标题】Vuex 存储值在不提交的情况下得到更新

【英文标题】：Vuex store values getting update without comitting

【发布时间】：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
;

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

【参考方案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