• 中文
  • 注册
    • 查看作者
    • nuxt.js使用nuxtServerInit获取组件数据 , 页面渲染前的store处理

      需求

      layouts布局中组件使用ssr

      情况描述

      nuxt.js在pages目录下可以使用asyncData 进行数据获取,在组件和layout中不能使用asyncData获取数据。

      解决方案

      nuxtServerInit在最开始可以进行数据获取和初始化,所以vuex+nuxtServerInit给layout传值

      1. 在目录store新建一个index.js,然后填入下面

        经典写法 已抛弃

      import Vuex from 'vuex'
      let store = () => new Vuex.Store({
        state: {
          token: ''
        },
        mutations: {
          setToken (state, token) {
            state.token = token
          }
        },
        actions: {
          async nuxtServerInit ({ commit }, { app }) {
            const  data  = await app.$axios.$post('http://api.idepy.com/wp-json/cty/v1/get_menu',{id:2});
            await commit('setToken', data);
          },
        }
      })
      export default store

      新写法

      export const state = () => ({
        // 定义导航菜单变量
        nav_nemu: ''
      });
      export const mutations = {
        // 传送导航菜单
        nav_nemu(state, nav_nemu) {
          state.nav_nemu = nav_nemu
        }
      }
      export const actions = {
        // 获取导航菜单内容
        async nuxtServerInit({commit}, {app}) {
          const { data } = await app.$axios.$post('wp-json/cty/v1/get_menu', {id: 2});
          await commit('nav_nemu', data);
        }
      }

      2.在layouts下的.VUE文件引用

      <script>
        export default {
          computed: {
            item_list () {
              return this.$store.state.token;
            }
          },
        }
      </script>


      属性 类型 可用 描述
      app vue根实例 客户端 & 服务端 包含所有插件的根实例。例如:想使用axios,可以通过context.app.$axios获取
      isClient Boolean 客户端 & 服务端 是否来自客户端渲染,废弃,请使用process.client
      isServer Boolean 客户端 & 服务端 是否来自服务端渲染,废弃,请使用process.server
      isStatic Boolean 客户端 & 服务端 是否通过nuxt generate
      isDev Boolean 客户端 & 服务端 是否开发模式,在生产坏境的数据缓存中用到
      isHMR Boolean 客户端 & 服务端 是否通过模块热替换,仅在客户端以dev模式
      route 路由 客户端 & 服务端 路由实例
      store vuex数据 客户端 & 服务端 Vuex.sttore实例
      env l Object 客户端 & 服务端 nuxt.config.js中的环境变量
      params Object 客户端 & 服务端 route.params的别名
      query Object 客户端 & 服务端 route.query的别名
      req http.Request 服务端 Node.js API的Request对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
      res http.Reponse 服务端 Node.js API的Reponse对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
      redirect Function 服务端 用于重定向另一个路由,状态码在服务端被使用,默认302 redirect([status,]path[,query])
      error Function 客户端 & 服务端 前往错误页面,error(parmas),params包含statusCode和message字段
      nuxtState Object 客户端 nuxt状态
      beforeNuxtRender(fn) Function 服务端 更新NUXT在客户端呈现的变量,具体了解请看官网

    • 0
    • 0
    • 0
    • 933
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号