Совместное использование реактивного состояния localStorage между несколькими приложениями vue на одной странице

Этот код работает нормально

<template>
  <aside :class = "`${is_expanded ? 'is-expanded' : ''}`">
    <div class = "head-aside">
      <div class = "app-logo">
        <i class = "bx bxl-trip-advisor"></i>
      </div>
      <span class = "app-name">CONTROLPANEL</span>
    </div>

    <div class = "menu-toggle-wrap">
      <button class = "menu-toggle" @click = "ToggleMenu()">
        <span class = "boxicons">
          <i class = "bx bx-chevrons-right"></i>click me
        </span>
      </button>
    </div>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      is_expanded: localStorage.getItem("is_expanded") === "true",
    };
  },

  methods: {
    ToggleMenu() {
      this.is_expanded = !this.is_expanded;
      localStorage.setItem("is_expanded", this.is_expanded);
    },
  },
};
</script>

Вот GIF, показывающий результат в действии: https://share.cleanshot.com/TtKsUj

Сделайте локальное хранилище реактивным, используя наблюдатель и установив для его свойства deep значение true. https://vuejs.org/guide/essentials/watchers.html#deep-watchers или если вы используете vue2, используйте шину событий

Вы говорите, что используете laravel с vue. Непонятно, как интегрируются компоненты vue, но я предполагаю, что laravel внедряет отдельные компоненты vue, которые вы хотели бы сообщить. (в отличие от SPA на основе vue, который взаимодействует с laravel только с использованием API)

Два компонента не знают друг о друге. Несмотря на то, что они оба имеют доступ к одному и тому же локальному хранилищу, они не знают, когда значения там обновляются.

Есть несколько способов справиться с этим, вот один из способов

создать реактивный объект вне компонентов для управления общим состоянием

import { ref, computed } from 'vue'
const isExpandedRef = ref(localStorage.getItem('is_expanded') === 'true');

window.IS_EXPANDED = computed({
  get(){
    return isExpandedRef.value
  },
  set(value){
    isExpandedRef.value = !!value;
    localStorage.setItem('is_expanded', isExpandedRef.value);
  }
})

ref требуется, чтобы при изменении isExpandedRef.value вычисляемый геттер запускал уведомления для своих слушателей.

Если вы загрузите это перед любым из компонентов, вы создадите вычисляемую (реактивную) переменную, доступную для любого скрипта на странице (кроме фреймов и теневого дома)

то вы можете использовать в своих компонентах, как это.

<template>
  <aside :class = "`${is_expanded ? 'is-expanded' : ''}`">
    <div class = "head-aside">
      <div class = "app-logo">
        <i class = "bx bxl-trip-advisor"></i>
      </div>
      <span class = "app-name">CONTROLPANEL</span>
    </div>

    <div class = "menu-toggle-wrap">
      <button class = "menu-toggle" @click = "is_expanded = !is_expanded">
        <span class = "boxicons"><i class = "bx bx-chevrons-right"></i></span>
      </button>
    </div>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      is_expanded: window.IS_EXPANDED,
    }
  },
}
</script>

поскольку is_expanded вычисляется с помощью геттеров и сеттеров, вы можете установить значение прямо из шаблона или использовать this.is_expanded = !this.is_expanded в методах.

Как уже говорилось, это зависит от использования глобального объекта window. Это решение предлагается из-за его простоты. У использования объекта окна есть некоторые недостатки, и более надежное решение будет полагаться на внедрение такого общего состояния вместо того, чтобы полагаться на окно, но это связано с большими накладными расходами.