Vue-Ant Design Pro of Vue-配置App.vue通过router-view组件实现局部刷新

向右看齐 2022-01-28 06:53 522阅读 0赞

项目实际开发中，很多地方经常需要一些局部刷新功能。如：创建后返回列表，修改后返回列表，局部操作刷新…  
如何简洁有效的实现局部刷新呢，在Ant Design Pro of Vue中，我们可以通过router-view组件来定义一个属性来实现局部刷新。并且在入口文件配置后，可以在项目任何地方使用，非常方便。

# Ant Design Pro of Vue-入口App.vue #

下载好Ant Design Pro of Vue框架后，入口代码如下：

<template>
      <a-locale-provider :locale="locale">
        <div id="app">
          <router-view/>
        </div>
      </a-locale-provider>
    </template>
    
    <script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
    import {  AppDeviceEnquire } from '@/utils/mixin'
    
    export default { 
      mixins: [AppDeviceEnquire],
      data () { 
        return { 
          locale: zhCN
        }
      },
      mounted () { 
    
      }
    }
    </script>
    <style>
      #app { 
        height: 100%;
      }
    </style>

# 修改配置后 #

我直接贴出来修改后的代码，通过定义一个 `isRouterAlive`属性来实现

<template>
      <a-locale-provider :locale="locale">
        <div id="app">
          <router-view v-if="isRouterAlive"/>
        </div>
      </a-locale-provider>
    </template>
    
    <script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
    import {  deviceEnquire, DEVICE_TYPE } from '@/utils/device'
    
    export default { 
      provide () { 
          return { 
              reload: this.reload
          }
      },
      data () { 
        return { 
          locale: zhCN,
          isRouterAlive: true
        }
      },
        methods: { 
          reload () { 
              this.isRouterAlive = false
              this.$nextTick(function () { 
                  this.isRouterAlive = true
              })
          }
        },
      mounted () { 
        const {  $store } = this
        deviceEnquire(deviceType => { 
          switch (deviceType) { 
            case DEVICE_TYPE.DESKTOP:
              $store.commit('TOGGLE_DEVICE', 'desktop')
              $store.dispatch('setSidebar', true)
              break
            case DEVICE_TYPE.TABLET:
              $store.commit('TOGGLE_DEVICE', 'tablet')
              $store.dispatch('setSidebar', false)
              break
            case DEVICE_TYPE.MOBILE:
            default:
              $store.commit('TOGGLE_DEVICE', 'mobile')
              $store.dispatch('setSidebar', true)
              break
          }
        })
      }
    }
    </script>
    <style>
      #app { 
        height: 100%;
      }
    </style>

# 使用 #

如何在某个组建中来使用呢？例：  
现在有个重置按钮，要求点击重置按钮列表刷新，可以这样写

看上面代码，我们通过`在当前子组件中通过inject来注入变量`，你可以在入口也就是父组件中看到我们通过

provide () { 
          return { 
              reload: this.reload
          }
      },

来提供了变量`reload`，所以我们可以在这里注入使用，然后在`methods`中通过`this.reload()`来达到局部刷新。  
**注意：**  
`这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。只要在父组件中调用了提供了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。`