vue.js - Vuex商店自动更新

我的Vuex存储区获得automatically updated，而没有在即时getters上调用任何committing或mutation任何router change。

在保存表单之前，我不会提交对VUEX的更改，因此这意味着将数据绑定(bind)到VUEX的两种方式。我觉得这是不可能的。在这种情况下，这是不希望的，因为如果用户更改了一些数据，然后在没有实际单击“保存”的情况下导航离开，则数据仍然是VUEX

最佳答案

<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。
而不是检查以下示例。希望对您有所帮助。

关于vue.js - Vuex商店自动更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44429951/