Contenu connexe Similaire à Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁 (20) Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁14. export default {
metaInfo() {
let metaBase = {
title: this.title,
meta: [
{
vmid: 'og:title',
property: 'og:title',
content: this.title
},
{
vmid: 'description',
name: 'description',
content: this.description
},
...
],
link: [
{
vmid: 'canonical',
rel: 'canonical',
href: this.canonical
}
]
};
if (this.prev) {
metaBase.link.push({
rel: 'prev',
href: 'https://manga-zero.coroco3.com' + this.prev
});
}
15. // server.js
.on('beforeStart', () => {
const { title, link, meta } = context.meta.inject();
context.head = (context.head || '') + title.text() + meta.text() + link
})
26. デバイス切り替ェ
const template = {
pc: fs.readFileSync(resolve('./src/app/templates/pc.html'), 'utf-8'),
sp: fs.readFileSync(resolve('./src/app/templates/sp.html'), 'utf-8')
};
27. デバイス切り替ェ
// srever.js
if (!isDevelop) {
const bundle = {
sp: require('./dist/sp/vue-ssr-server-bundle.json'),
pc: require('./dist/pc/vue-ssr-server-bundle.json')
};
const clientManifest = {
sp: require('./dist/sp/vue-ssr-client-manifest.json'),
pc: require('./dist/pc/vue-ssr-client-manifest.json')
};
renderer = {
sp: createRenderer(bundle.sp, { clientManifest: clientManifest.sp },
pc: createRenderer(bundle.pc, { clientManifest: clientManifest.pc },
};
} else {
readyPromise = setupDevServer(app, (bundle, options) => {
renderer = {
sp: createRenderer(bundle.sp, options, template.sp),
pc: createRenderer(bundle.pc, options, template.pc)
};
});
}
34. import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
name: 'component-hoge',
metaInfo: { ... },
proprs: { ... }
})
export default class ComponentHoge extends Vue {
// initial data
msg = 123;
// lifecycle hook
mounted () {
this.greet();
}
// computed
get computedMsg () {
return 'computed ' + this.msg;
}
// method
greet () {
alert('greeting: ' + this.msg);
}
}
40. import Vue from 'vue';
import createDecorator from 'vue-class-component';
function ComponentTopDefault() {
return createDecorator((options) => {
options = object.assign({}, {
name: 'view-top',
props: {
hoge: {
...
}
}
}, options);
});
}
@Component()
@ComponentTopDefault()
export default class ViewTop extends Vue {}
54. API のステータスからAPI のステータスから
/product/999999
// store/action.js
export const FETCH_ITEMS = ({ commit }, { path, key, type }) => {
return fetchItem(path, key).then((result) => {
if (result.status === 200) {
...
} else if (result.mainQuery) {
/* ↑ メインクエリに値する API のレスポンスが200 じゃない時 ↑ */
/* ↓ state に error コードをセットする ↓ */
commit(types.SET_STATUS, { key: 'error', value: result.status });
} else {
...
}
}).catch((error) => {
console.error('catch FETCH_ITEMS', error);
});
};
55. API のステータスからAPI のステータスから
// server.js
.once('data', () => {
const termState = (context.state.error && context.state.error !== 0);
if (context.state.error !== 0) {
res.status(context.state.error);
}
})
57. でいいらしい
async fetch({ store, route, app, error }) {
let url = `/api/${route.params.id}`
let data = await app.$axios.$get(url)
if (data.items.length === 0) {
// there's no data this should be a 404
// No! there is no Content so throw `204 No Content` response:
// https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#2xx_Succes
error({statusCode: 204, message: "The server successfully processed t
}
store.commit('item', data.Items[0])
}