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

就完成了！

在大问题中回答您的问题：

模块背后的想法是将相关信息保留在某个功能中。也就是说，假设您希望每个页面都有名称，标题和副标题，因此页面模块状态变量将为：

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/

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

1 个答案:

就完成了！