NUXT 如何将数据从页面传递到布局

Question

我正在创建一个非常简单的网站。我想根据navLayout页面模板中设置的数据更改导航栏元素。我想将数据传递给布局，然后使用props将其发送到NavBar. 我的问题是如何emit从页面到布局的数据。

布局/default.vue

<template>
  <div>
    <NavBar />
    <div class="site-container">
      <nuxt />
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '~/components/NavBar.vue'

export default {
  components: {
    NavBar,
  }
}
</script>

页面/index.vue

...
<script>
export default {

  data: () => {
    return {
      navLayout: 'simple'
    }
  },
  computed: () => {
    return {
    this.$emit('navLayout', value)
    }

  }
...
</script> 

Answer 1

一种选择是使用 vuex。

首先进入nuxt项目中的store文件夹并创建一个index.js文件

export const state = () => ({
   layout: 'Your default value',
})
    
export const mutations = {
  CHANGE_NAV_LAYOUT(state, layout) {
    state.layout = layout;
  }
}

然后在您可以调用的任何页面/组件内this.$store.commit('CHANGE_NAV_LAYOUT',value)

对于您的导航栏组件，您创建一个计算属性并将其引用到商店布局值：

computed: {
     navLayout() {
         return this.$store.state.layout;
     }
}