时间戳

首页 > 解决方案 > 如何在 Nuxt JS 中将变量值从“页面”传递到“布局”？

vue.js - 如何在 Nuxt JS 中将变量值从“页面”传递到“布局”？

问题描述

我是 VUE 的初学者，现在知道这是正确的语法。我需要从页面设置变量 {{name}}。这意味着我需要将变量 page 的值更改为 page. 我怎样才能做到这一点？帮帮我，伙计们。

我的“布局”代码如下 -

<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>

标签： vue.jsnuxt.js

解决方案

这可以通过使用 vuex 模块来实现。布局可以访问 vuex 存储，因此一旦页面打开，您可以调用突变来设置页面名称并在布局组件中监听名称状态。

首先是 Vuex 模块，我们可以通过在 store 文件夹中创建一个文件来添加一个模块，在这种情况下我们正在创建页面模块：

// 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现在，一旦页面到达 created 钩子（也可以是挂载的钩子），我们就可以使用突变设置 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>

它已经完成了！

在评论中回答您的问题：

模块背后的想法是将某些功能的相关信息保存在一个地方。即假设您想为每个页面设置名称、标题和副标题，因此页面模块状态变量将是：

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 和模块背后的想法是在一个地方通过应用程序在许多地方提供所需的信息。即应用程序主题信息，如果用户选择浅色或深色主题，也许颜色可以改变。你可以在这里阅读更多关于 nuxt 的 vuex：https ://nuxtjs.org/guide/vuex-store/和https://vuex.vuejs.org/

推荐阅读