vue.js - 观察者回调错误“function () { return this._data.$$state }”

Question

每次在我的字段中输入一个字符时，我都会收到此错误。例如，我的手机上有数据：123，当我添加一个号码时，每次添加内容时都会出现此错误。[Vue 警告]：观察者“function () { return this._data.$$state }”的回调出错：“错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。” （在 中找到）和这个错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。这是我的编辑代码：

<template>
    <div>
        <!-- Dashboard start -->
      <sideBar></sideBar>      

<div class="dashboard submit-property">
    <div class="container-fluid">
        <div class="row">
            <div class="dashboard-nav">
                <div class="dashboard-inner">
                    <h4>main</h4>
                    <p></p>
                    <h4>Listings</h4>
                    <ul>
                        <li><a href="/bookings"><i class="flaticon-calendar"></i> Bookings</a></li>
                        <li><a href="/my-properties"><i class="flaticon-empire-state-building"></i>My Properties</a></li>
                        <li class="active"><a href="/submit-property"><i class="flaticon-plus"></i>Submit Property</a></li>
                    </ul>
                    <h4>Account</h4>
                    <ul>
                        <li><a href="/my-profile"><i class="flaticon-male"></i>My Profile</a></li>
                        <li><a href="/"><i class="flaticon-logout"></i>Logout</a></li>
                    </ul>
                </div>
            </div>
            <div class="dashboard-content">
                <div class="dashboard-header clearfix">
                    <div class="row">
                        <div class="col-sm-12 col-md-5"><h4>Submit Property</h4></div>
                        <div class="col-sm-12 col-md-7">
                            <div class="breadcrumb-nav">
                                <ul>
                                    
                                    <li>
                                        <a href="/index">Dashboard</a>
                                    </li>
                                    <li class="active">Submit Property</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="submit-address dashboard-list">
                    <form @submit.prevent="formSubmit">
                        
                        <h4 class="bg-grea-3">Basic Information</h4>
                        {{ Rendezvous }}
                        <div class="search-contents-sidebar">
                            <div class="row pad-20">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label>Email</label>
                                     <input
                                        v-model="Rendezvous.email"
                                        placeholder="email"
                                        type="text"
                                        class="form-control"
                                        
                                        />
                                        
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label>Phone</label>
                                        <input
                                        v-model="Rendezvous.phone"
                                        placeholder="Phone"
                                        type="text"
                                        class="form-control"
                                        
                                        />                         
                               </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label>Details</label>
                                        <input
                                        v-model="Rendezvous.details"
                                        placeholder="details"
                                        type="text"
                                        class="form-control"
                                        
                                        />
                                    </div>
                                </div>
                                
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label>Day</label>
                                        <input
                                        type="date"
                                            placeholder="day"
                                            v-model="Rendezvous.day"
                                            class="form-control"
                                            />
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label>Start</label>
                                            <input
                                            placeholder="start"
                            
                                            v-model="Rendezvous.start"
                                            
                                            type="time"
                                            class="form-control"
                                            />                     
                                    </div>
                                </div>
                            </div>
                        </div>
                          </form>  
                       <div class="col-lg-4 col-md-12 col-sm-12">
                             <button type="submit" class="btn btn-md button-theme"
                             @click="updateApp()">
                                Submit
                            </button>
                        </div>  
                      </div> 
                
                <p class="sub-banner-2 text-center">© 2021 Residena</p>
            </div>
        </div>
    </div>
</div>
<!-- Dashboard end -->
    </div>
</template>

<script>
import sideBar from "../../components/sideBar";
import Swal from "sweetalert2";
import Multiselect from "vue-multiselect";
import { mapGetters, mapActions } from "vuex";

/**
 * Invoice-detail component
 */
export default {
 
  // eslint-disable-next-line vue/no-unused-components
  components: { sideBar,Multiselect  },
   data() {
    return {
       /*  ownerprop: {
        name: "",
        type: "",
        propertyCondition: "", 
        adress:"",
        city: "",
        zip: "",
        Status: "",
        totalArea:"",
        numberRooms:"",
        numberBathrooms:"",
        floorNumber:"",
        price:"",
        yearBuilt:"",
        description:"",
        owner:""
      },  */
        submitted: true,
        submit: true,
       /*  Rendezvous:{
            details:'',
            day:'',
            start:'',
            email:'',
            phone:''
        } */
    };
  },

   computed: {
    ...mapGetters("rendezvousModule", ["rendezvouss"]),

     Rendezvous() {
      return this.rendezvouss.find((rendezvous) => rendezvous._id === this.id);
    }, 
    },
   created() {
    this.id = this.$route.params.id
    // eslint-disable-next-line no-console
    console.log("hello", this.getRendezvouss);
    // eslint-disable-next-line no-console
    console.log("employesssss", this.rendezvouss);
    this.getRendezvouss();

  },
  
     
    
  methods: {
    ...mapActions("rendezvousModule", ["getRendezvouss"]),
    // eslint-disable-next-line no-unused-vars
     formSubmit(e) {
      this.submitted = true;
      // stop here if form is invalid
    }, 
    
    
    updateApp() {
      this.submitted = true;
      // stop here if form is invalid
      // eslint-disable-next-line no-console
      console.log('i am in form action')
         this.$store.dispatch("rendezvousModule/updateRendezvous", {
          _id:this.Rendezvous._id,
          details: this.Rendezvous.details,
          day: this.Rendezvous.day,
          start: this.Rendezvous.start,
          phone: Number(this.Rendezvous.phone),
          email: this.Rendezvous.email,
           
        }) .then(()=>{        
        // eslint-disable-next-line no-console
        console.log('day',this.Rendezvous.day )
         // eslint-disable-next-line no-console
        console.log('email',this.Rendezvous.email )
        this.$router.push("bookings")
        })
        Swal.fire("Done!", "Appointment updated successfully!", "success");
         // eslint-disable-next-line no-console
         console.log('Appointment updated');

       
      }
    },
  
};
</script>

这是我的更新突变：

UPDATE_RENDEZVOUS(state, payload) {
    console.log("payload", payload);
    const index = state.rendezvouss.findIndex(
      rendezvous => rendezvous._id === payload._id
    );
    console.log("index", index);
    Vue.set(state.rendezvouss, index, payload);
  },

这是我的更新操作：

async updateRendezvous({ commit }, payload) {
    try {
      console.log("payloadddddd", payload);
      console.log('i am inside try update action')
      const { data } = await apolloClient.mutate({
        mutation: UPDATE_RENDEZVOUS,
        variables: payload
      });

      commit("UPDATE_RENDEZVOUS", data.updateRendezvous);

      commit("setLoading", false);
    } catch (error) {
      commit('setLoading', false)
      commit('setError', error)
      console.error(error);
    }
  },

任何建议将不胜感激谢谢。

标签： vue.jsgraphqlvuexedit