Question

欢迎使用此主题。我最近尝试使用Nuxt框架制作我的Web应用程序，但遇到了问题。

在我的默认布局中，我有两个组成部分。标头组件和侧边栏组件。如果我单击标题组件中的汉堡包图标，则根据汉堡包图标的状态（真或假），边栏需要变小或变大

因此，为了使其更加复杂，我不想使用道具将其通过其他组件发送。我想将其作为模板，以便人们可以轻松使用。我可以将本地组件变量转换为其他组件可以使用的全局变量吗？

所以我现在拥有的代码是这样的：

this is the index page

this is the header component

this is the sidebar component

如您所见，我在页眉组件页面上触发了汉堡状态。我想在侧边栏组件中访问该状态，以便我可以调整侧边栏

重要的一件事是，它必须尽可能简单，以便以后使用此模板的人不必添加不必要的工作

这可行吗？

Answer 1

获得全局变量的最简单方法是将其设置为状态元素，并进行更改以进行更改。由于您的“ hambuger”是布尔值，因此无需将参数传递给突变，这使得一切变得更加容易。

您可能希望在商店中有一个命名模块来处理此问题，但现在我将其放在store / index.js中。

export const state = () => ({
  hamburger: true
})

export const mutations = {
  changeHamburger (state) {
    state.hamburger = !state.hamburger
  }
}

然后在任何页面或组件中，您都可以访问该状态元素：

Component.vue

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    hamburger () {
      return this.$store.state.hamburger
    }
  },
  methods: {
    ...mapMutations({
      hamburgerChange: 'changeHamburger'
    })
  }
}
</script>

因此，这意味着您现在可以在组件中使用计算出的属性“汉堡包”，并且可以通过调用“ hamburgerChange”来更改它，例如<v-btn @click="hamburgerChange">。

Nuxt在2个组件之间发送数据

1 个答案: