javascript - Vue JS 如果出现错误则更改提交按钮

Question

使用Vuex，我有一个表单，当单击按钮时(@click =“loader(true)”)发送到加载器突变以将加载更改为true，然后将带有Bulma CSS的is-loading类设置为true ('正在加载':$store.state.index.loading)。

然后，如果表单为空且带有errors.title，我会收到来自服务器的错误，这对于输入来说效果很好，但是如果有错误，我该如何将 is-loading 类设置为 false？

(如果运行该代码片段将不起作用)

export const state = () => ({
  loading: false
});

export const mutations = {
  loader(state, value) {
    state.loading = value;
  }
 }

<form @submit.prevent="postThis">

  <div class="field">
    <div class="control">
      <input class="input" :class="{ 'is-danger': errors.title }" type="text" id="title" placeholder="I have this idea to..." autofocus="" v-model="newTitle">

    </div>
    <p class="is-size-6 help is-danger" v-if="errors.title">
      {{ errors.title[0] }}
    </p>
  </div>

  <div class="field">
    <div class="control">

      <button @click="loader(true)" type="submit" :class="{'is-loading' : $store.state.index.loading }">
        Post
      </button>


    </div>
  </div>
</form>

<script>
  import {mapMutations,} from 'vuex';
  methods: {
    ...mapMutations({
      loader: 'index/loader'
    })
  }
</script>

Answer 1

问题是关于使用 ...mapMutations，但如果有人想添加业务逻辑，建议使用 mapAction 和 mapState 。我将解释如何使其与 mapAction 和 mapState 一起使用，因为调用 API 可能涉及在应用程序中使用业务逻辑。否则，我会说，除了通知应用程序的其他部分您正在加载之外，为什么还要费心使用 VueX ;)。话虽如此，这就是我的答案。

使用...mapState，您可以获得要搜索的内容，即状态的计算 react 性。这种情况尤其会在调用操作期间发生。然后，操作将发生变化，或者我们在 VueX 中所说的“提交”，即状态(请参阅文档: https://vuex.vuejs.org/guide/state.html )

让我们将您的代码更改为具有命名空间的模块，然后在您的 vue 中使用该模块(如果应用程序很大，这就是我会做的，否则可以使用突变或不使用 VueX 来实现相同的效果全部):

const LOADING_STATE = 'LOADING_STATE'
export default {
  namespaced: true, // Read the doc about that

  state: {
    loaded: false
  },

  mutations: {
    [LOADING_STATE]: function (state, isLoading) {
      state.loading = isLoading
    }
  },

  actions: {
    setLoading ({ commit }, isLoading) {
      commit(LOADING_STATE, isLoading)
    }
  }
}

对于您的 vue 文件，其中包含您的模板和操作。它看起来像这样:

<script>
  import { mapAction, mapState } from 'vuex'

  exports default {
     computed: {
        ...mapState({
          // Here you could even have the full computation for the CSS class.
          loading: state => state.loadingModule.loading,

          // Like this... or you could use the getters that VueX does (search in the documentation since it's out of the scope of your question)
          loadingCss: state => { return state.loadingModule.loading ? 'is-loading' : '' }
        })
      },
     methods: {
         // Usage of a namespace to avoid other modules in your VueX to have the same action.
         ...mapActions(['loadingModule/setLoading']),
     }
  }
</script>

关于您的 html 模板，您将能够调用方法 this['loadingModule/setLoading'](true) 或 false，然后调用您要设置的属性。可以对“正在加载”使用react。

在使用 Promise 时，在您的 post 或 get 或任何其他 HTTP Rest 调用期间，不要忘记上下文。如果您使用 Axios，在您的 VueJs 上下文中注册它后，我会这样做

this.$http.get('/my/api')
   .then(response => { 
      // ... some code and also set state to ok ... 
   })
   .catch(e => { 
      // set state to not loading anymore and open an alert 
   })

考虑到您正在某处进行 HTTP(S) 调用，让我们现在完成您的代码。

<form @submit.prevent="postThis">

  <div class="field">
    <div class="control">
      <!-- Here I would then use a computed property for that class (error). I would even put the a template or a v-if on a div in order to show or not all those html elements. That's you're choice and I doubt this is your final code ;) -->
      <input class="input" :class="{ 'is-danger': errors.title }" type="text" id="title" placeholder="I have this idea to..." autofocus="" v-model="newTitle">
    </div>

    <p class="is-size-6 help is-danger" v-if="errors.title">
      {{ errors.title[0] }}
    </p>
  </div>

  <div class="field">
    <div class="control">
      <button @click="['loadingModule/setLoading'](true)" type="submit" :class="{'is-loading' : loading }">
        Post
      </button>
    </div>
  </div>
</form>