javascript - 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;
     }
}