Vue3.0全局变量以及全局方法问题

背景

　　Vue3.0想把有些公共的变量及方法放到一个单独的js文件中，免得每个组件都要声明一次。

环境

 　　Vue3.0

　　@arcgis/core 4.24.7

 

解决方案

 　　方法一，只针对全局变量：

　　main.js

const app = createApp(App)
app.config.globalProperties.$gisServerAddr = 'http://192.168.1.127:6080/arcgis/rest/services/'
app.use(store).use(router).use(ElementPlus).mount('#app')

　　.vue文件引用

import {getCurrentInstance } from 'vue'
    const {
      appContext: {
        config: { globalProperties }
      }
    } = getCurrentInstance()
 const queryUrl =
        globalProperties.$gisServerAddr + 'wjwf/patch_2000/FeatureServer/0'  //取到全局变量

　　

　　方法二，全局变量和全局方法都可用（推荐）：

　　①全局变量

　　在src/assets文件夹下新建utils/gisUrl.js

　　

 

 

 　　gisUrl.js

　　

// 测试环境
const serviceUrl = {
  wj2000Url: 'http://192.168.1.127:6080/arcgis/rest/services/wjwf/wjwf2000new/MapServer/tile/{level}/{row}/{col}?blankTile=false',
  patchesLayerUrl: 'http://192.168.1.127:6080/arcgis/rest/services/wjwf/patch_2000/FeatureServer/0',
}

export default serviceUrl

　　.vue文件引用即可

　　

import serviceUrl from '@/assets/utils/gisUrls'

　　②方法跟变量类似，但是方法一般会有很多，所以export的方式就不用export default的方式了：

　　在src/assets文件夹下新建utils/publicModules.js

// 公共的数据和方法
import Search from '@arcgis/core/widgets/Search'

const addSearchWidget = (view, layer, baseInfos, zoom) => {
  const searchWidget = new Search({
    view: view,
    container: 'searchWidget',
    includeDefaultSources: false,
    sources: [
      {
        layer: layer,
        name: '网格',
        placeholder: '输入网格编号',
        outFields: ['*'],
        searchFields: ['wgid'], 
        suggestionTemplate: '网格编号：{wgid}',

        locationEnabled: false,
        displayField: 'wgid',
        exactMatch: false,
        maxResults: 6,
        minSuggestCharacters: 0,
        maxSuggestions: 10,
        resultGraphicEnabled: true,
        suggestionsEnabled: true
        // zoomScale: 1
      }
    ]
  })

  searchWidget.on('select-result', function (event) {
    view.goTo({
      target: event.result.feature,
      zoom: zoom
    })
  })
  // Add the search widget to the top right corner of the view
  view.ui.add(searchWidget, {
    position: 'manual'
  })
}

export { addSearchWidget }

　　.vue文件调用

　　

import { addSearchWidget }f rom '@/assets/utils/publicModules'

 

参考网址

　　vue3中的抽离封装方法实现

 

---