Vuex Store automatically refreshes

Question

My Vuexstore receives automatically updatedwithout calling any gettersor committingany mutationdirectly router change.

I do not make changes to VUEX until the form is saved, so this means that the data is connected in two ways to VUEX. It seemed to me that this was impossible. In this case, this is undesirable, as the user changes some data, and then moves without actually pressing "save", the VUEX data is still changed

Answer 1

<template>
  <h1>{{userName}}</h1>
  <input type="text" v-model="name.selected" :placeholder="user.username" @keyup.enter="Confirm"/>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { updateUserData } from 'mesh-shared/api/'
  export default {
    name: 'PreferenceProfile',
    data() {
      return {
        name: {
          isActive: false,
          selected: '',
          onChange: false
        }
      }
    },
    computed: {
      ...mapGetters([
        'user',
        'preference'
      ]),
      userName() {
        if (this.name.selected !== '') {
          return this.name.selected
        } else {
          return this.user.username
        }
      }
    },
    methods: {
      toggleNameRider() {
        this.name.isActive = true
      },
      async Confirm() {
        const params = {
          userId: this.user.userId,
          accessToken: this.user.auth.accessToken,
          avatar: (this.avatar.uploadData.url) ? this.avatar.uploadData.url : this.user.avatar,
          username: this.userName
        }
        const data = await updateUserData(params)
        console.log(data)
        const user = Object.assign(this.user, {
          completed: true
        }, data.data.user)
        this.cancel()
      },
      cancel() {
        this.avatar.newUrl = ''
        this.name.selected = ''
        this.name.isActive = false
      }
    }
  }
</script>

- . , v-model getter. . , .