vue实现状态加载

Vue 状态加载的实现方法

使用 v-if 和 v-else 控制加载状态

通过条件渲染指令 v-if 和 v-else 可以轻松切换加载状态和内容显示。定义一个布尔值变量 isLoading 来控制显示状态。

<template>
  <div>
    <div v-if="isLoading">加载中...</div>
    <div v-else>内容加载完成</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

使用计算属性优化显示逻辑

当需要根据多个条件判断加载状态时，计算属性可以提供更灵活的解决方案。

<template>
  <div>
    <div v-if="isLoading">加载中...</div>
    <div v-else-if="hasError">加载出错</div>
    <div v-else>内容加载完成</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      hasError: false
    }
  },
  mounted() {
    fetchData().then(() => {
      this.isLoading = false
    }).catch(() => {
      this.hasError = true
      this.isLoading = false
    })
  }
}
</script>

使用 Vuex 管理全局加载状态

在大型应用中，可以通过 Vuex 集中管理加载状态，实现跨组件共享。

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div>
    <div v-if="$store.state.isLoading">全局加载中...</div>
  </div>
</template>

使用第三方库实现高级加载效果

对于更复杂的加载需求，可以集成第三方库如 vue-skeleton-loading 或 vue-content-loader。

安装 vue-content-loader:

npm install vue-content-loader

使用示例:

<template>
  <div>
    <content-loader v-if="isLoading" :width="400" :height="200">
      <!-- 定义占位内容 -->
      <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
      <rect x="0" y="20" rx="3" ry="3" width="350" height="10" />
    </content-loader>
    <div v-else>实际内容</div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: {
    ContentLoader
  },
  data() {
    return {
      isLoading: true
    }
  }
}
</script>

结合路由实现页面过渡加载

在路由切换时显示加载状态，提升用户体验。

// main.js
router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  setTimeout(() => {
    store.commit('setLoading', false)
  }, 500)
})

<!-- App.vue -->
<template>
  <div id="app">
    <div v-if="$store.state.isLoading" class="page-loader">
      <div class="spinner"></div>
    </div>
    <router-view/>
  </div>
</template>

以上方法涵盖了从基础到高级的 Vue 状态加载实现，开发者可以根据项目需求选择合适的方案。对于简单场景，使用 v-if 指令足够；复杂应用则建议采用状态管理或专业加载组件。