state: {
characters: [],
page: 0,
pages: 0,
},
mutations: {
setCharacters: (state, { characters, pages, page }) =>
Object.assign(state, { characters, pages, page }),
},
actions: {
async fetchCharacters({ commit }, page = 1) {
try {
const { data: { info, results } } = await axios.get(`${BASE_URL}?page=${page}`);
commit('setCharacters', {
page,
pages: info.pages,
characters: results,
});
} catch (e) {
console.error(e);
}
},
},computed: {
currentPage: {
get() {
return this.$store.state.page;
},
set(page) {
this.$store.dispatch('fetchCharacters', page);
},
},
},<el-pagination
v-model:current-page="currentPage"
:page-count="$store.state.pages"
layout="prev, pager, next"
background
/>if(function1 & function2){
// если обе возвращают true что то делаем.
}
router.push/replace(), изначально созданная исключительно в качестве сахара (да, чтобы не писать useRouter()), потом её научили выполнять редирект на стороне сервера, а потом научили справляться с внешними урлами. все используют router.push
interface Package {
id: number;
activated: boolean;
name: string;
}
interface ActivatedPackage extends Package {
activated: true;
}
interface OptionalProps {
foo: string;
bar: number
}
const activatedPackages: Array<ActivatedPackage & Partial<OptionalProps>> = [ ... ];
data: () => ({
items: [
{ buttonText: '+', className: 'container' },
{ buttonText: '-', className: 'container-fluid' },
],
...
}),<button
v-for="n in items"
v-text="n.buttonText"
:class="{ active : active === n.className }"
@click="active = n.className"
></button>
{
path: '/history/:id',
component: HistoryId,
name: 'historyId',
props: true
}<router-link
tag="a"
class="button"
:to="{name: 'historyId', params: {id: historyItem.id, date: historyItem.date}}"
><script>
export default {
props: ['date'],
remove() {
this.arr = this.arr.filter( button => button !== this.active)
}remove<button @click="remove()">Remove active button</button>
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = require('./app')
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'
async function start () {
// Init Nuxt.js
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
await nuxt.ready()
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host, () => {
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
})
}
start()const express = require('express')
const app = express()
module.exports = appserverMiddleware: {
'/api': '~/api'
},const express = require('express')
// Create express instance
const app = express()
app.get('/', (req, res) => res.status(200).json([{name: "Robert"}, {name: "John"}]))
// Export express app
module.exports = app
// Start standalone server if directly running
if (require.main === module) {
const port = process.env.PORT || 3001
app.listen(port, () => {
console.log(`API server listening on port ${port}`)
})
}<template lang="pug">
div
p(v-for="user in users") {{ user.name }}
</template>
<script>
export default {
async asyncData({ $axios }) {
const users = await $axios.$get('/api/')
return {
users,
}
},
}
</script>