next从存储区生成动态路由



我使用nuxt.js,现在需要通过运行npm run generate来生成我的动态页面。然而,我需要创建动态项的列表项存储在存储中,因此我需要以某种方式映射它们,以便生成可以为它们创建路由

如何访问nuxt.config.js中的存储

generate: {
dir: 'wwwroot', //override the default generation dir to create everything straight in wwwroot
routes() {
let vdc = this.$store.vdcServers.map(server => `/virtual-data-centres/${server.slug}`);
return Promise.all([vdc]).then(values => {
return values.join().split(',');
})
}
}

ERROR  Could not resolve routes                                                                        
FATAL  Cannot read properties of undefined (reading '$store')   

据我所知,你不能从那个地方进入商店。也许用一些hooks?我怀疑。
同时,如果你的商店中有可用的元素,你应该能够通过快速调用axios或像我认为的那样找到它们。

这种方法完全没问题

import axios from 'axios'
export default {
generate: {
routes(callback) {
axios
.get('https://my-api/users')
.then(res => {
const routes = res.data.map(user => {
return '/users/' + user.id
})
callback(null, routes)
})
.catch(callback)
}
}
}

这可能有点代码重复,同时,这仍然是最简单的方法。
否则,您可以尝试将其持久化到某个localStorage或任何类似的解决方案中,以便在Vuex和您的下一代中都拥有它。

最新更新