1

我创建了直接在 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 提交发生并被记录。

我正在通过 ...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 的新手，所以请让我知道我没有实施最佳实践的地方。

4

1 回答 1

2

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));
},
于 2018-12-22T20:34:00.780 回答