Vuex Store Automatically Updated

Question

My Vuex store gets automatically updated without calling any getters or committing any mutation on immediate router change.

I am not committing changes to VUEX until the form is saved, so it means the data is bound two way to VUEX. I was under the impression this was not possible. In this case it is not desired since if the user changes some data, then navigates away without actually clicking "save", the data is VUEX 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>

I recommend you to do something like this. as I understand from your question you're setting v-model to getter. instead of doing that check the example below. I hope it can help.