Home
What is phila-vue-datafetch (@phila/vue-datafetch in npmjs.com)?
phila-vue-datafetch (pvd) is a library that can be imported into any Vue.js project, providing a set of functions for fetching data from web APIs. It uses specific custom places in the Vuex store for retrived data, mainly:
- sources
- geocode
- parcels
pvd does not run code to initiate a Vue instance or Vuex store. In a project that USES pvd, you would:
-
In package.json add the dependency "@phila/vue-datafetch": "1.1.7", or in index.html add:
<script src=“//unpkg.com/@phila/vue-datafetch@1.1.7/dist/phila-vue-datafetch.js></script> -
Initiate the Vue instance and Vuex store, import the @phila/vue-datafetch package, and use individual files from it
By integrating pvd into a Vue.js project as a plugin, all of the functions can be called by any component of the project. See a full explanation in Initialization.
An example project exists at pvd-example-app and a live example app exists here.
The functions are currently specific to Philadelphia, because geocoding/data-fetching for Philadelphia is complicated by the fact that there are 2 sets of parcels:
- Dept. of Records (DOR) parcels
- Phila Water Dept. (PWD) parcels
Click for more general information about parcels.
(It is possible that all functions could be made more generic, or the library could be expanded include a simpler data-fetching system for projects that do not have to deal with the Philadelphia parcel issue.)
After importing the phila-vue-datafetch library, you can call functions in it using the controller. For example, in any component of your project, you can call:
this.$controller.HandleMapClick(e)
The functions of the controller call functions in the dataManager and router.
For more info on the controller functions, read controller.js.
The mixin "controllerMixin" is created and exported in index.js.
The dataManager holds all functions for geocoding and fetching data from APIs. These functions are not called by components, but only by functions of the controller.
For more info on the dataManager funcitons, read data-manager.js.
The router holds functions for routing a website based on parameters in the url.
For more info on the router functions, read router.js
phila-vue-datafetch requires using Vuex (https://vuex.vuejs.org/) to create a "store", and it requires that certain objects are in the store. See more info here.