Vue.js 将变量的值从子组件传递到两个父组件vuejs？努克斯

如何存储变量的状态值

例如，我有三个组件：

home.vue

和

map.vue

，以及一个常用的

sidebar.vue

组件，它在

home.vue

和

map.vue

中使用

---

我从

侧栏.vue

（存储侧栏宽度状态的变量）传递一些数据。这两个组件中的数据都应该动态变化。也就是说，当从

home.vue

切换到

map.vue

时，用于更改

侧边栏.vue

宽度的变量的状态不应更改。

您可以在中存储侧边栏的宽度

Vuex是Vue.js应用程序的状态管理模式+库。它作为应用程序中所有组件的集中存储，具有确保状态只能以可预测的方式变化的规则

创建存储：

const store = new Vuex.Store({
  state: {
    width: 50
  },
  mutations: {
    setWidth (state, value) {
      state.width = value
    }
  }
})

使用存储选项（由Vue.use（Vuex）启用）将存储“注入”到根组件的所有子组件中：

通过向根实例提供store选项，该存储将被注入根的所有子组件中，并作为

this.$store

在这些子组件上可用。更改宽度时，通过在组件的方法中调用变异方法进行更新：

this.$store.commit('setWidth', value)

要以vue组件的任何方法从存储中读取

宽度的值，请使用以下命令：

this.$store.state.width

你是一个新的贡献者，欢迎你，但这不是你问问题的方式。您不应该要求完整的项目或代码。你应该自己解决一些问题。阅读帮助中心主题，了解更多有关您可以提出的问题以及您必须避免的问题类型的信息。社区一定会很乐意为您解答正确的问题。
this.$store.state.width