Почему значение в composables не обновляется автоматически при изменении данных?

Как сделать переменную reactive после вызова функции из другого компонента во Vue?
  • 10 мая 2024 г. 17:30
Ответы на вопрос 2
Значение в composables не обновляется автоматически при изменении данных, потому что обновление компонентов происходит только при изменении состояния компонента или при передаче новых пропсов. Поэтому, если данные внутри компонента изменяются извне (например, при вызове функции из другого компонента), компонент не будет перерендерен, чтобы обновить отображаемые данные.

Чтобы сделать переменную reactive после вызова функции из другого компонента во Vue, можно воспользоваться реактивным объектом Vue.js - объектом Vue, и использовать его методы для управления состоянием данных. 

Например, можно создать новый объект Vue и определить в нем переменную, которую вы хотите обновлять реактивно. После этого можно привязать эту переменную к нужным компонентам и обновлять ее через методы объекта Vue.

Пример:

```javascript
// Создание нового объекта Vue
const vueApp = new Vue({
  data: {
    reactiveVariable: 'initialValue'
  },
  methods: {
    updateVariable(newValue) {
      this.reactiveVariable = newValue;
    }
  }
});

// В другом компоненте вызываем метод для обновления переменной
vueApp.updateVariable('newValue');
```

Таким образом, при вызове метода `updateVariable` из другого компонента, переменная `reactiveVariable` будет изменяться реактивно, и компоненты, привязанные к этой переменной, будут автоматически обновляться.
Потому что в каждом компоненте при вызове useVariablesSelectedMenu создаётся своя независимая реактивная переменная totalActive. 

Если нужно глобальное состояние, то totalActive нужно вынести за пределы useVariablesSelectedMenu и экспортировать отдельно.

Тогда везде, где используется useVariablesSelectedMenu, значение totalActive будет реактивным и одинаковым.
Похожие вопросы