nuxtjs实战官网爬坑页面跳转和异步请求数据

第一次使用nuxtjs的服务端渲染，

企业官网需要seo优化和较快的首屏加载

碰到的第一个问题

新闻列表页面点击分页页码跳转到第二页或者其他分页，

再点击新闻列表页面跳转到新闻详情页面，

再由新闻详情返回新闻列表页面的时候新闻列表分页会返回到第一页，目的是由详情返回的时候分页的页码还是之前的页码保持不变。

使用vuex

nuxtjs集成了vuex模块所以就不用手动安装了，操作目录nuxt自动生成文件夹store

新建index.js文件

//index.js  store下面的文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = () => new Vuex.Store({
    state: {  
        news: {    
        list: [],    
        page: 1,    
        count: 6, 
        total: 0  
    },    mutations: {
        setNews(state, data) {  
            state.news.list = data.list  
            state.news.page = data.page  
            state.news.total = data.total
        },
    },
    actions: {
        async getNews({commit, state}) {  
            const res = await model.getNews({    //这里使用axios异步获取到了新闻数据
            page: state.news.page - 1,    
            count: state.news.count  
        })  
        commit("setNews", {    
            list: res.items,    
            page: res.page + 1,    
            total: res.total
        })},
    }
})
export default store
复制代码

然后页面news.vue里面的操作

//页面news.vue
export default {
    async asyncData({ store }) {  
    await store.dispatch("getNews")  
    let newStore = store.state.news;  
    return {    
        list: newStore.list,    
        page: newStore.page,    
        total: newStore.total
    }},
}
复制代码

这样只要不关闭浏览器，页码的数据就一直保存在vuex里面了

碰到的第二个问题

官网有一些数据有好几个地方用的到，首页，关于我们，公共footer。比如联系方式，公司名称，备案信息这一类东西，仔细看了下nextjs的启动顺序，决定使用中间件来做，这样就可以在页码加载之前就获取到了数据

nuxtjs已经生成了中间件的文件夹middleware

新建setting.js，文件的名称就是你这个中间件的名称，你使用中间件就用这个文件的名称调用

//setting.js 这是一个中间件
export default async function ({store}) {  
    await store.dispatch("getSetting") 
}
复制代码

我放在了layout里面的布局组件default.vue调用

//default.vue 布局组件
export default {  middleware: "setting"}
复制代码

这样就可以在整个项目里面使用vuex获取到这个公用数据了