Vue & Vuex - 如何在任何输入/状态更改时启用表单提交？

Question

我有一个带有默认禁用提交按钮的表单。如何在不为每个输入或其他方式设置观察程序的情况下通过任何更改启用它？？

当模板被挂载或创建时，Vuex mapState 是空的，所以我不能深度克隆它并与例如 deep-diff 进行比较..（我也读过它的坏做法，将状态深度克隆到变量中）。

我的按钮：

<v-btn color="green" @click="onUpdateProfile" :disabled="!anyInputsChanged" :loading="false">Save</v-btn>

我的输入字段：

<InputField
  label="Förnamn"
  v-model="first_name"
/>
<InputField
  label="Efternamn"
  v-model="last_name"
/>

我的脚本

import { mapState } from 'vuex'
import { mapFields } from 'vuex-map-fields'

import FormCard from '@/components/FormCard.vue'
import InputField from '@/components/base_components/InputField.vue'

export default {
  components: {
    FormCard,
    InputField,
  },
  data () {
    return {
      loading: true,
      isDisabled: true,
    }
  },
  computed: {
    ...mapState(['user', 'userProfile']),
    ...mapFields([
        'userProfile.first_name',
        'userProfile.last_name',
        'userProfile.fortnox_data.api_key'
    ]),
  },
  watch: {
  },
  mounted: function() {
    this.loading = false;
  },
  methods: {
    onUpdateProfile () {
      this.$store.dispatch('updateUserData', {
        id: this.user.uid,
        first_name: this.userProfile.first_name,
        last_name: this.userProfile.last_name,
        updated_at: new Date().toISOString(),
      })
    },
  }
}

“anyInputsChanged”变量/计算/我没有定义的任何东西，因为我不知道如何定义。基本上这就是我的问题.. 如果任何输入元素发生更改，我想启用“提交”，如果它们都未更改，则禁用。

Answer 1

假设您使用的是 basic updateField mutation，您可以添加一个 Vuex 订阅者来监听任何提交并更新一个额外的状态。

例如

import Vue from 'vue';
import Vuex from 'vuex';

import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

const store = new Vuex.Store({
  strict: true,
  state: {
    modified: false, // ? add this one
    userProfile: {
      // whatever you got
    }
  },
  getters: {
    getField,
  },
  mutations: {
    updateField,
    setModified: (state, modified) => state.modified = !!modified
  },
  // actions, etc
});

// subscribe to "updateField" mutations
store.subscribe((mutation, state) => {
  if (mutation.type === "updateField") {
    store.commit("setModified", true)
  }
})

export default store

然后您可以使用modified 状态来控制您的按钮。超级简单的例子，但你可能想使用mapState 或类似的。

<v-btn 
  color="green"
  @click="onUpdateProfile"
  :disabled="!$store.state.modified"
  :loading="false"
>Save</v-btn>

之后要做的最后一件事是在您的 updateUserAction 操作中将 modified 提交回 false 以重置状态。