Question

我将VueX store插入了Vue应用。

我应该如何处理表单中字段的值。

在窗体初始化时，它应该使用存储中的值，但不应尝试更新不可变状态的值。

在我使用v-model之前，但是我有点迷茫。

我尝试过类似的事情：

    computed: mapState(["profile"])
    data() {
      return {
        firstname: '',
      };
    },
    created() {
      this.firstname = this.profile.firstname;
    }

但是每次我重新打开该组件时，它都不会更新商店中的值。

This solution也不是我想要的，因为我希望使用服务器中的值而不是当前正在编辑的值来更新存储。

Answer 1

这是我的方法：

在组件安装时，我将字段值设置为组件状态
然后我将v模型插入状态，并使用操作在提交时更新商店。

<template>
    <div id="login" class="cModal">
        <div>
            <header>
                <h2>Edit Profile</h2>
            </header>
            <div>
                <form @submit="edit()">
                    <div class="input-group">
                        <label for="firstname">Firstname</label>
                        <input id="firstname" type="text" v-model="firstname"/>
                    </div>
                    <div class="input-group">
                        <button>Edit profile</button>
                    </div>
                </form>
            </div>
            <footer class="cf">
                <a href="#" class="btn" @click="closeModal">Fermer [x]</a>
            </footer>
        </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed: mapState(["profile"]),
    data() {
      return {
        firstname: '',
      };
    },
    created() {
      this.firstname = this.profile.firstname;
    },
    methods: {
      edit() {
        this.$emit("handleProfileUpdate", {firstname: this.firstname});
      },
      closeModal() {
        this.$emit("close");
      },
    }
  };
</script>

Answer 2

状态值最初是空的，请尝试观察它并基于该值更新数据对象属性：

computed: mapState(["profile"]),
watch:{
   profile(val) {
       this.firstname = val.firstname;
   }
  },
   mounted() {
       this.firstname = this.profile.firstname;
   },

如何使用VueX存储字段的值初始化组件？

2 个答案: