填写输入表单时防止 vuex 更新

Question

在我的 Vuex 应用程序中，我有一个更新表单，它使用用户的个人资料（来自 Vuex 商店）填充输入字段，然后在提交时将表单提交到数据库。

所以我需要在页面上显示用户的个人资料，但不希望在用户更改表单中的值时（被动地）更新它们，因为在我的情况下，如果用户这样做会产生误导未完成表格离开页面并返回。然后它可能看起来像数据已经更新（它还没有因为他们还没有提交表格）。

模板vue

<div class="d-block mb-5">
            <label for="profile-description" class="mb-2">{{
              $t('setting.change_profile.self_introduction')
            }}</label>
            <textarea
              v-model="profile.self_introduction"
              class="w-100 resize-none border px-3 py-2"
              rows="8"
              id="profile-description"
            ></textarea>
          </div>

打字稿文件

public profile: any = {
    email_option: 1,
    avatar: '',
    last_name: '',
    first_name: '',
    last_name_kana: '',
    first_name_kana: '',
    self_introduction: ''
  }

  created() {
    this.getUserProfile()
  }

  getUserProfile() {
    UserService.getUserProfile()
      .then(res => {
        if (res.status === 200) {
          this.profile = res.data
          UserModule.HANDLE_USER_PROFILE(this.profile)
        }
      })
      .catch(error => {
        console.log(error)
      })
  }

  updateProfile() {
    this.$refs.observer.validate().then(isValidate => {
      if (!isValidate) {
        return
      } else {
        const new_profile = {
          email_option: this.profile.email_option,
          avatar: this.profile.avatar,
          last_name: this.profile.last_name,
          first_name: this.profile.first_name,
          last_name_kana: this.profile.last_name_kana,
          first_name_kana: this.profile.first_name_kana,
          self_introduction: this.profile.self_introduction
        }
        UserService.updateUserProfile(new_profile)
          .then(res => {
            if (res.status === 200) {
              let user_name = `${this.profile.first_name} ${this.profile.last_name}`
              UserModule.UPDATE_USER_NAME(user_name)
              this.$bvModal.show('modal-success')
            }
          })
          .catch(error => {
            this.getUserProfile()
            this.$bvModal.show('modal-error')
          })
      }
    })
  }

Vuex 商店

profile: {
      email: '',
      email_option: 1,
      avatar: require('@/assets/images/user-avatar.png'),
      last_name: '',
      first_name: '',
      last_name_kana: '',
      first_name_kana: '',
      self_introduction: ''
    },
@Mutation
  handleUserProfile(user_profile: any) {
    this.user.profile = user_profile
  }

  @Action({ rawError: true })
  HANDLE_USER_PROFILE(user_profile: any) {
    this.context.commit('handleUserProfile', user_profile)
  }

Answer 1

问题是你的 v-model="profile.self_introduction" 在你的 Template.vue 中。由于profile.self_introduction直接影响store中的state，你可能还会遇到以下错误：

Error: [vuex] do not mutate vuex store state outside mutation handlers.

要解决这个问题，您需要设置一个不参考商店状态的 v-model，并在提交后将其发送到商店。

如果您需要使用商店中的数据预先填充您的表单，您需要解决将数据应用到新对象的简单方法。例如：

this.localToFillForm = this.objectFromStore;

如果您要使用 this.localToFillForm 预填表格，并将其用作此表格的 v-model，它仍然与 this.objectFromStore.

填写输入表单时防止 vuex 更新

prevent vuex from update when filling the input form

vuex