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

Question

欢迎来到这个主题。我最近尝试使用Nuxt框架来制作我的网络应用程序，但我遇到了一个问题。

在我的默认布局中，我有两个组件。标题组件和侧栏组件。如果我点击标题组件中的汉堡包图标，侧边栏需要变小或变大，具体取决于汉堡图标状态（真或假）

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

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

this is the index page

this is the header component

this is the sidebar component

正如你所看到的，我在标题组件页面上触发hamburgerstate。我想在sidebarcomponent中访问该状态，以便我可以调整侧边栏

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

这有什么可能吗？

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>

所以这意味着你现在可以在你的组件中使用计算属性'hamburger'，并可以通过调用'hamburgerChange'来改变它，例如<v-btn @click="hamburgerChange">。