如何在Nuxt JS中把 "page "的变量值传给 "layout"？

Question

我是VUE的初学者，不知道这个是正确的语法。我需要从一个页面中设置变量{{name}}。也就是说，我需要把变量的值从页面改到页面。我怎么才能实现呢？请大家帮帮我。 我的 "布局 "代码如下--------。

<template>
  <div class="login-page">
    <div class="col1">{{ name }}</div>
    <div class="col2">
      <div class="content-box">
        <nuxt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

而我的 "页面 "代码如下

<template>
  <div>Welcome</div>
</template>

<script>
export default {
  layout: 'login',
  data: function() {
    return {
      name: 'Victor'
    }
  }
}
</script>

Answer 1

这可以通过使用vuex模块来实现。布局有访问vuex商店的权限，所以一旦打开一个页面，就可以在布局组件中调用突变来设置页面名称和监听名称状态。

首先是Vuex模块，我们可以通过在store文件夹中创建一个文件来添加模块，本例中我们创建的是page模块。

// page.js file in the store folder
const state = {
  name: ''
}

const mutations = {
    setName(state, name) {
    state.name = name
  }
}

const getters = {
  getName: (state) => state.name
}

export default {
  state,
  mutations,
  getters
}

现在我们可以使用 setPageName 突变来设置页面到达创建的钩子（也可以是挂载的钩子）时的pageName值。

// Page.vue page
<template>
  <div>Welcome</div>
</template>
<script>
  export default {
    layout: 'login',
    created() {
      this.$store.commit('page/setName', 'Hello')
    },
  }
</script>

在布局组件中，我们有一个计算过的属性pageName（或名称，如果我们想要的话）。

<template>
  <div class="login-page">
    <div class="col1">{{ name }}</div>
    <div class="col2">
      <div class="content-box">
        <nuxt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    name() {
      return this.$store.getters['page/getName']
    }
  }
}
</script>

这样就完成了！

回答你在逗号中的问题。

模块背后的想法是把一些功能的相关信息保存在一个地方。I.e 假设你想让每个页面都有名称、标题和副标题，那么页面模块的状态变量将是。

const state = { name: '', title: '', subtitle: ''}

每个变量都可以通过突变来更新，声明。

const mutations = {
  setName(state, name) {
    state.name = name
  },
  setPageTitle(state, title) {
    state.title = title
  },
  setPageSubtitle(state, subtitle) {
    state.subtitle = subtitle
  },
}

而他们的值可以从任何页面更新。

this.$store.commit('page/setPageTitle', 'A page title')

同样的，如果你想读取值。

computed: {
  title() {
    // you can get the variable state without a getter
    // ['page'] is the module name, nuxt create the module name
    // using the file name page.js
    return this.$store.state['page'].title
  }
}

获取器是好的格式或过滤信息。

如果需要的话，可以随时添加新的模块，vuex和模块背后的想法是通过应用程序，在一个地方有很多地方需要的信息。即应用程序的主题信息，如果用户选择浅色或深色的主题，也许可以改变颜色。你可以在这里阅读更多关于vuex与nuxt的信息。https:/nuxtjs.orgguidevuex-store。 和 https:/vuex.vuejs.org。