Передайте значение переменной из дочернего компонента в два родительских компонента, vuejs? nuxt

Question

Как сохранить значение состояния переменной?

Например, у меня есть три компонента: home.vue и map.vue, а также общий компонент sidebar.vue, который используется внутри home.vue и map.vue.

Я передаю некоторые данные из sidebar.vue (переменная, хранящая состояние ширины боковой панели). И эти данные должны динамически меняться в обоих компонентах. То есть при переключении с home.vue на map.vue состояние переменной для изменения ширины sidebar.vue не должно изменяться.

Answer 1

Вы можете сохранить ширину боковой панели в Vuex store .

Vuex - это шаблон управления состоянием + библиотека для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом.

Создать хранилище:

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

«Внедрить» хранилище во все дочерние компоненты из корневого компонента с помощью параметра хранилища (включается Vue.use (Vuex)):

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
  ...
})

Предоставив параметр хранилища корневому экземпляру хранилищабудет внедрен во все дочерние компоненты корня и будет доступен для них как this.$store. Когда ширина изменяется, обновите ее, вызвав метод мутации в методах ваших компонентов:

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

Чтобы прочитать значение width из хранилища в любом методе ваших vue-компонентов, используйте это:

this.$store.state.width