Vuexストア自動的に更新

Question

私Vuex店は、任意のgettersまたはcommitting任意のmutation即時router change上を呼び出さずにautomatically updatedを取得します。

フォームが保存されるまでVUEXへの変更をコミットしないので、データがVUEXに2つの方法でバインドされていることを意味します。私はこれが不可能であったという印象を受けていました。ユーザーは、いくつかのデータを変更した場合、その後、実際には「保存」をクリックせずに離れてナビゲートするので、この場合には、それが望まれていない、データがVUEXはまだ

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を設定しています。 これを行う代わりに、以下の例を確認してください。私はそれが助けることを望む。