Vuex 商店自动更新
Vuex Store Automatically Updated
我的 Vuex
商店得到 automatically updated
没有调用任何 getters
或 committing
任何 mutation
即时 router change
.
在保存表单之前我不会提交对 VUEX 的更改,因此这意味着数据以两种方式绑定到 VUEX。我的印象是这是不可能的。在这种情况下,这是不希望的,因为如果用户更改了一些数据,然后在没有实际单击 "save" 的情况下导航离开,数据仍然是 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。
而不是这样做检查下面的例子。希望对你有帮助。
我的 Vuex
商店得到 automatically updated
没有调用任何 getters
或 committing
任何 mutation
即时 router change
.
在保存表单之前我不会提交对 VUEX 的更改,因此这意味着数据以两种方式绑定到 VUEX。我的印象是这是不可能的。在这种情况下,这是不希望的,因为如果用户更改了一些数据,然后在没有实际单击 "save" 的情况下导航离开,数据仍然是 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。
而不是这样做检查下面的例子。希望对你有帮助。