VUEX使用Computed mapGetters更新数据模型

Question

我是Vuex的新手，我正在尝试更新卡。

每次更新计算的getter时，从数据模型中获取imageURL属性。getter正在更新，因为我可以观察到组件的HTML发生了变化。我只是无法使用此事件来更新数据模型。

我尝试使用mounted()方法，但是下面显示的if语句没有被执行。

有什么建议吗?

谢谢!

<script>
import { mapGetters, mapState } from "vuex";
export default {  
created() {
// do some initial fetch
},
data() {
return {
card: {
title: "",
cost: 0,
description: "",
imageURL: "",
},
};
},
mounted(){
if(this.rewardsImageUrl){
this.card.imageURL = this.rewardsImageUrl;
console.log(`set imageURL to card data model: ${this.card.imageURL}`);
}
},    
computed: {
...mapState(["user", "setUploadedImageUrl"]),
...mapGetters(['rewardsImageUrl'])
},
methods: {
close() {
this.$emit("close");
},
async addCard() {
this.$emit("close");
},
selectImage() {
this.$refs.selectImage.click();
},
async previewImage(event) {
this.imageFile = event.target.files[0];
this.$store.dispatch("uploadRewardsImage", this.imageFile);
},
},
};
</script>

Answer 1

要监听变化，可以这样使用watch:

computed: {
...mapState(["user", "setUploadedImageUrl"]),
...mapGetters(['rewardsImageUrl'])
},
watch:{
setUploadedImageUrl(){
console.log('setUploadedImageUrl changed', this.setUploadedImageUrl)
},
},