NuxtJS context中常用属性

context是nuxt额外提供的对象。在asyncData，plugins，middlewares，modules，store，nuxtServerInit等特殊的nuxt生命周期区域中都会使用到context。

app

官方描述：包含所有插件的 Vue 根实例。例如：在使用 axios 的时候，你想获取 $axios可以直接通过context.app.$axios 来获取

• app是context中的重要属性。类似于vue中的this。全局方法和属性都会挂载到它里面。
• 由于服务端渲染的特殊性，很多nuxt提供的生命周期都是运行在服务端，也就是说他们会先于vue实例的创建，因此在这些生命周期中。我们无法通过this去获取实例上的方法和属性，使用app可以弥补这一点。
• 一般我们会把全局的方法同时注入到this和app中，在服务端的声明周期中使用app去访问该数据。而在客户端中使用this。保证方法的共用

假设axios已经被注入，一般主要数据通过asyncData(该声明周期发起请求，将获取到的数据交给服务端拼接成html返回)提前请求做服务端渲染，次要数据通过vue的生命周期请求

export default {
    async asyncData({app}){
       let list = await app.$axios.getList().then(res => res.data)
       return list;
    }
    
    data(){
        return{
            list:[],
            data:[],
        }
    }
    async mounted(){
        let result = await this.$axios.getData();
        if(data.success === 200) this.data = result
    }    
}

store

官方描述：Vuex.Store 实例。只有vuex 数据流存在相关配置时可用

• Vuex.Store 实例，运行项目时会尝试找到是应用目录下的store目录，如果该目录存在，它会将模块文件加到构建配置中。
• 我们使用的时候可以直接在根目录下创建store文件。然后在store中写js就行。和我们在vue中使用vuex没有什么区别

// 创建state store/list.js
export const state = () =>{
    list:[],
    data:[],
}

export const motations = {
    updateList(state,payload){
        state.list = payload;
    },
    updateData(state,payload){
        state.data = payload;
    }
}

// 使用
export default {
    async asyncData({app, store}){
        let list = await app.$axios.getList().then(res=>res.data)
        store.commit('updateList',list);
        return list;
    }
    
    async mounted(){
        let result = await this.$axios.getData();
        store.commit('updateData', result);
    }
}

redirect

官方描述：用这个方法重定向用户请求到另一个路由。状态码在服务端被使用，默认 302 redirect([status,] path [, query])

• 该方法重定向用户请求到另一个路由，通常会用在权限验证

export default function({redirect}){
    // 校验token，如果token不合格跳转到登录页面
    if(!token){
        redirect({'/login',query:{ path:'/home' }})
    }
    // 如果只是单纯的重定向路由
    redirect('/home');
}

error

官方描述：用这个方法展示错误页：error(params) 。params 参数应该包含 statusCode 和 message 字段

• 该方法跳转到错误页

export default{
    async asyncData({app,error}){
        const list = await app.$axios.getList().then(res=>{
            if(res.code !== 200){
                error({
                    statusCode: res.code,
                    message: res.msg
                })
                return
            }else{
                return res.data;
            }
        })
        return list;
    }
}

route

官方描述：Vue Router 路由实例

export default function({ app }){
    app.$route({path:'/home',query:{id:1}})
    app.$route({name:'/home',params:{id:2}})
}

params && query

官方描述：route.params || route.query 的别名

export default{
    async asyncData({app, query, params}){
        let id = "";
        // query
        id = app.$router.query.id;
        // params 
        id = app.$route.params.id;
        
        const list = await app.$axios.getList({id})
    }
}