Как создать состояние Vuex по умолчанию с правильным свойством isLoading

Question

Я создал действия, которые отправляю прямо в файл store.js, чтобы создать состояние «по умолчанию».У меня есть свойство состояния по умолчанию:

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 происходят и записываются.

Я обращаюсь к isLoading в паре компонентов через ... mapState, а 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));
},