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

Posted 2023-02-23

【中文标题】Nuxt 在 2 个组件之间发送数据

【英文标题】：Nuxt send data between 2 components

【发布时间】：2019-07-20 13:18:24

【问题描述】：

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

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

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

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

this is the index page

this is the header component

this is the sidebar component

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

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

这有什么可能吗？

【问题讨论】：

我强烈建议您使用 Codesanbox 链接编辑帖子。这使我们更容易提供帮助。在图像中提供代码非常糟糕

【参考方案1】：

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

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

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

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

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

组件.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">。

【讨论】：

感谢您对这张图片发表评论。我确实通过使用商店来修复它。我什至没有使用计算函数。 mapMutations 足以得到我想要的，但感谢您的帮助！