Adds a wpLoader factory function for creating loaders from the vue-router route object.

wakecoder · wakecoder · commit 2435caff2472 · 2017-09-02T19:07:49.000-05:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-wordpress",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A collection of Vue components and mixins for use with WordPress and the WP-REST API",
   "author": "WakeCoder <ajqajq@gmail.com>",
   "scripts": {
diff --git a/src/example/example.vue b/src/example/example.vue
@@ -3,7 +3,7 @@
     <h1>vue-wordpress</h1>
     <p>A collection of vue.js components and mixins for interfacing with the WordPress REST API. For information on how to use vue-wordpress, go to the github site. The most used and useful pieces of this repo are probably methods in the mixin:
       <ul>
-        <li>createWpLoader simplifies pulling data from the WP-REST API with postLoaders. PostLoaders support pagination and simplify async fetching of data. Support custom mappers.</li>
+        <li>createWpLoader simplifies pulling data from the WP-REST API with WP loaders. WP loaders support pagination and simplify async fetching of data. Support custom mappers.</li>
         <li>mapPosts is a default map function for use with createWpLoader to map the REST-API response for posts into a simpler data format.
         <li>getTags is a function that can be used in the map function of a post loader to get all tags associated with a post.</li>
         <li>getImageSource is a function that maps simple image sizes to WP-REST mapper properties</li>
diff --git a/src/mixins/wp-mixin.js b/src/mixins/wp-mixin.js
@@ -97,6 +97,26 @@ export default {
                 return previous.concat(current.filter(t => t.taxonomy === tagTaxonomy)
                     .map(t => t.slug))
             }, []) : []
+        },
+        /**
+         * Takes a vue-router route object (this.$route) and returns the appropriate WP-REST API post loader.
+         * This can be used with default (*) routing in the vue-router to dynamically pull in full posts.
+         * Note: This makes the assumptions that your WP install is using slugs for permalinks
+         * @param {object} options - {
+         * {object} route: the vue-router route object (this.$route)
+         * {string} baseUrl - Specifies the base URL for the WP-REST install (e.g. 'https://pixelthing.com/blog')
+         * {string} postTypes - Optional. Can be used to specify a custom post type. Defaults to 'posts'
+         * {array} queryParams - Optional. Can be used to specify additional query parameters for the wp loader
+         * {bool} embed - Optional. Indicates whether links, tags, image URLs, etc. should be returned embedded in the WP REST response. Defaults to true.
+         * {function} mapper - Optional. Used to map the WP-REST API response into a simpler object. Defaults to mapPosts
+         */
+        createWpLoaderFromRoute({ route, baseUrl, type, queryParams, embed, mapper }) {
+            let slug = route.params.slug || route.params[0]
+            type = type || 'posts'
+            const url = baseUrl + '/wp-json/wp/v2/' + type
+            queryParams = queryParams || []
+            queryParams.push('slug=' + slug)
+            return this.createWpLoader(url, { queryParams, embed, mapper })
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-wordpress",`
`3`		`- "version": "1.0.4",`
	`3`	`+ "version": "1.0.5",`
`4`	`4`	`"description": "A collection of Vue components and mixins for use with WordPress and the WP-REST API",`
`5`	`5`	`"author": "WakeCoder <ajqajq@gmail.com>",`
`6`	`6`	`"scripts": {`