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提交发生并被记录。

我正在通过... 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)，因此状态永远不会改变...

修复很简单，只需在您的final中使用一个函数即可：

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状态

1 个答案: