如何使用正确的 isLoading 创建默认的 Vuex 状态属性

Question

我创建了直接在 store.js 文件中发送的操作，以创建 'default' 状态。我有一个默认状态属性:

isLoading: false

我分派了一个使用有效负载进行多次提交的操作：

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 中调度操作很有意义。

因此，我是 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));
},

如何使用正确的 isLoading 创建默认的 Vuex 状态属性

How to create default Vuex state with proper isLoading property

javascript

vue.js

state

vuex

buefy

如何使用正确的 isLoading 创建默认的 Vuex 状态 属性

How to create default Vuex state with proper isLoading property

javascript

vue.js

state

vuex

buefy

如何使用正确的 isLoading 创建默认的 Vuex 状态属性