nuxt动态设置layout布局

Question

我项目是用nuxt做的，现在有一需求要点击页面按钮来切换页面布局。我是这样写的，给layout赋一变量，按钮切换时改变变量的值，但运行时却报错说那个变量未定义，我猜应该是变量未赋上值就变编译了，应该是变量获取值的位置不对？我是在computed获取的值。

export default{
    computed:mapGetters({
        themeFlag: 'menu/themeToggle'
    }),
    layout: themeFlag ? 'vertical':'horizontal'
}

或者大家有其它思路来实现这个需求的吗？

Answer 1

layout不应该放在computed里然后return this.themeFlag ? 'vertical':'horizontal'吗
还是我已经落伍了...

Answer 2

我也遇到这个问题，刚看了官方的说明，layouts应该可以写成一个方法，并返回当前要使用的布局。

export default {
  layout: 'blog',
  // 或
  // 这里应该可以定义部分逻辑
  layout (context) {
    return 'blog'
  }
}

Answer 3

可以使用以下代码切换主题，但不是服务器渲染的，还没找到怎么服务器渲染

window.$nuxt.setLayout('blog')

Answer 4

Nuxt 中使用 mapGetters 和 mapState 的实例:

• vue 文件

<template>
  <div>
    <!--  -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {},
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters({
      language: 'app/language'
    }),
  },
  watch: {},
  created() {},
  mounted() {
    console.log(this.language)
  },
  methods: {
    // 
  },
  head() {
    return {}
  }
}
</script>

<style lang="scss" scoped src="./index.scss"></style>

• /store/app.js 文件

import Cookies from 'js-cookie'

export const state = () => {
  return {
    language: Cookies.get('language') || '',
  }
}

export const getters = {
  language(state) {
    return state.language
  }
}

export const mutations = {
  TOGGLE_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  },
}

export const actions = {
  // ...
}

Answer 5

服务端渲染的话，可以试下配合Cookies；
例如：

// pages:index.vue 的 layout 属性
layout({req,$Tools}){
    if (process.server){
      // $Tools.getcookiesInServer数据源于：req.headers.cookie
      let cookies = $Tools.getcookiesInServer(req);
      cookies.isLayout = cookies.isLayout?cookies.isLayout:'default';
      return cookies.isLayout==='default'?'default':'new_layout';
    }
    return 'default';
}