적절한 isLoading 속성을 사용하여 기본 Vuex 상태를 생성하는 방법

적절한 isLoading 속성을 사용하여 기본 Vuex 상태를 생성하는 방법

store.js 파일에 직접 디스패치하는 액션을 생성하여 디폴트 상태를 만듭니다.기본 상태 속성이 있습니다.

isLoading: false

payload를 사용하여 여러 개의 커밋을 하는 액션을 디스패치합니다.

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_POST 및 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는 처음이니 베스트 프랙티스를 구현하지 않은 곳을 알려주세요.

finally값이 아닌 함수를 사용합니다.

현재 코드가 즉시 실행됩니다.commit('IS_LOADING', false)그래서 상태가 변하지 않아...

수정은 간단합니다.마지막으로 기능을 사용하세요.

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));
},

언급URL : https://stackoverflow.com/questions/53826424/how-to-create-default-vuex-state-with-proper-isloading-property