javascript - 如何使用适当的 isLoading 属性创建默认的 Vuex 状态

Question

我已经创建了直接在 store.js 文件中分派(dispatch)的操作，以创建“默认”状态。我有一个默认状态属性:

isLoading: false

我分派(dispatch)一个使用有效负载进行多次提交的操作:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(axios)
Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  state: {
    projects: null,
    posts: null,
    isLoading: false,
    baseUrl: 'https://example.com/v2/'
  },
  getters: {

  },
  mutations: {
    SET_PROJECTS (state, payload) {
      state.projects = payload;
    },
    SET_POSTS (state, payload) {
      state.posts = payload;
    },
    IS_LOADING (state, payload) {
      state.isLoading = payload;
    }
  },
  actions: {
    setProjects ({ commit, state }) {
      let uri = `${state.baseUrl}projects`;

      commit('IS_LOADING', true);

      axios.get(uri).then((response) => {
        commit('SET_PROJECTS', response.data);
      }).finally(commit('IS_LOADING', false));
    },
    setPosts ({ commit, state }) {
      let uri = `${state.baseUrl}posts?per_page=100`;

      commit('IS_LOADING', true);

      axios.get(uri).then((response) => {
        commit('SET_POSTS', response.data);
      }).finally(commit('IS_LOADING', false));
    }
  }
})

store.dispatch('setProjects');
store.dispatch('setPosts');


export default store

我的 IS_LOADING 提交似乎从未发生，并且 Vue devtools Vuex 部分中没有记录突变。我的 SET_POSTS 和 SET_PROJECTS 提交发生并被记录下来。

我正在通过 ...mapState 访问几个组件中的 isLoading 并且 isLoading 附加到一个 Buefy 组件:

<template>
  <b-notification :closable="false">
    <div v-for="project in projects" :key="project.id" class="card is-flex">
      <div class="card-image">
        <figure class="image is-4x3">
          <img :src="project.project_image.url" alt="project image">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content is-flex">
            <p class="title is-4">{{project.title.rendered}}</p>
            <p class="subtitle is-6"></p>
          </div>
        </div>

        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus nec iaculis mauris. <a>@bulmaio</a>.
          <a href="#">#css</a> <a href="#">#responsive</a>
          <br>
          <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
        </div>
      </div>
    </div>
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="true"></b-loading>
  </b-notification>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Projects',
  data() {
    return {
      isFullPage: false,
    }
  },
  methods: { 
  },
  computed: {
    ...mapState ([
      'isLoading',
      'projects'
    ])
  }
}
</script>

<style lang="scss" scoped>


</style>

重点是在需要来自 api 的数据的组件上呈现动画加载轮。那么，为什么我的 IS_LOADING 突变不起作用？任何帮助表示赞赏。

我想将调度调用保留在 store.js 文件中。站点内的多个位置都需要 API 数据，因此在 store.js 中分派(dispatch)操作对我来说很有意义。

我是 Vue 和 Vuex 的新手，所以请让我知道我在哪些地方没有实现最佳实践。

Answer 1

finally 采用函数而不是值。

您当前的代码现在立即执行 commit('IS_LOADING', false) 因此状态永远不会改变...

修复很简单，只需在 finally 中使用一个函数:

setProjects ({ commit, state }) {
  let uri = `${state.baseUrl}projects`;

  commit('IS_LOADING', true);

  axios.get(uri).then((response) => {
    commit('SET_PROJECTS', response.data);
  }).finally(() => commit('IS_LOADING', false));
},