wordpress
Wordpress option should be WordpressOption, Array<WordpressOption> or function that returns one of them. WordpressOption is the interface which looks like that:
export interface WordpressOption {
slug: string | (() => string),
type?: string,
embed?: Boolean,
beforeSave?: (fetchedData: any) => any,
beforeRequest?: (url: string) => string,
beforeSaveFailed?: () => any
}
Attribute: slug
Type: String or Function that returns String
Context: Inside function you have access to component's this
It is slug which will be fetched from Wordpress. If you would set value to the apple
, it would send request to the:
https:///yourwordpress.com/wp-json/wp/v2/pages?slug=apple
Example use case as String:
wordpress: {
slug: 'apple'
}
Example use case as Function that returns String:
wordpress: {
slug () {
return this.$route.params.slugToFetch
}
}
Attribute: type
Type: String
Default value: pages
It is type of post which will be fetched from Wordpress. If you would set value to the custom_type
, it would send request to the:
https:///yourwordpress.com/wp-json/wp/v2/custom_type?slug=<your_slug>
Example use case as String:
wordpress: {
slug: 'apple',
type: 'custom_type'
}
Attribute: embed
Type: Boolean
Default value: false
Whether add &_embed at the end or not
https:///yourwordpress.com/wp-json/wp/v2/custom_type?slug=<your_slug>&_embed
Example use case:
wordpress: {
slug: 'apple',
embed: true
}
Attribute: beforeSave
Type: Function
Argument: fetchedData: any
Returns: fetchedData: any
Context: There you do not have access to this
This hook will be executed before save fetched data to the Vuex. You have access to the stored data here in first argument. That's what you return will be saved in the Vuex
What's the real purpose of that hook? You can get rid of unnecessary Wordpress' API fields so they would not slow down user's device.
Example use case:
wordpress: {
slug: 'apple',
beforeSave (fetchedData) {
return {
title: fetchedData.title,
content: fetchedData.content.rendered,
excerpt: fetchedData.excerpt.rendered,
}
}
}
Attribute: beforeRequest
Type: Function
Argument: url: string
Returns: url: string
Context: There you do not have access to this
This hook will be executed before sending request to the Vuex. You have access to the URL here in the first argument. That's what you return will be target of XHR Request.
What's the real purpose of that hook? You can easily change target URL based on any things (e.g. for multilang).
Example use case:
wordpress: {
slug: 'apple',
beforeSave (fetchedData) {
return {
title: fetchedData.title,
content: fetchedData.content.rendered,
excerpt: fetchedData.excerpt.rendered,
}
}
}
Attribute: beforeSaveFailed
Type: Function
Returns: data: any
Context: There you do not have access to this
This hook will be executed when client tried to fatched data but it thrown an error. There you could return some placeholder data. So the user will receive any informations. That what's you return will be stored in the Vuex
What's the real purpose of that hook? Predefined contect if something goes wrong.
Example use case:
wordpress: {
slug: 'apple',
async beforeSaveFailed () {
const predefinedHtmlTemplate = await import('myTemplate.json')
return predefinedHtmlTemplate
}
}
How to access fetched data?
Inside computed/data add a proper pointer do the data:
{
// ...
computed: {
apple () {
return this.$store.state.wp_post.types.posts.apple
}
}
}
Tips
- Each function can be async
- You can access component's this inside other than slug hooks with that trick:
{
data () {
return {
currentLanguage: 'es'
}
},
wordpress () {
const self = this
return {
slug: 'apple',
beforeRequest (url) {
const apiUrl = self.$store.state.wp_config.url
return apiUrl.endsWith('/')
? apiUrl + self.currentLanguage + '/'
: `${apiUrl}/${self.currentLanguage}/`
}
}
}
}
- Wordpress option could be array, so pages would be fetched in paralell:
{
wordpress: [
{
slug: 'apple'
},
{
slug: 'orange'
}
]
}
Or as function:
{
wordpress () {
return [
{
slug: 'apple'
},
{
slug: 'orange'
}
]
}
}