Comment changer la direction de la page dans Vue sans actualiser la page

Question

Je veux pouvoir changer l'orientation de la page lorsque la valeur change dans Pinia, le code fonctionne bien mais la page se recharge et je ne veux pas que la page se recharge.

Voici mon App.vuefichier

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

theme.value === "dark" ? document.documentElement.classList.add("dark") : false; //works
language.value === 'ar' ? document.documentElement.setAttribute('dir','rtl'): false // 需要重新加载页面
</script>

<template>
  <router-view></router-view>
</template>

Answer 1

Nécessite une liaison de données régulière. Dans ce cas, faites appel à un observateur.

watch(
  language,
  value => {
   if (value === 'ar')
     document.documentElement.setAttribute('dir','rtl')
   else 
     document.documentElement.removeAttribute('dir')
  },
  { immediate: true }
)

Veuillez vous assurer de ne pas accéder à document lors du rendu côté serveur.

Answer 2

Essayez de placer votre contenu dans un autre élément plutôt que de le modifier document. De plus, utilisez les propriétés calculées pour la réactivité.

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

const direction = computed(() => language.value === 'ar' ? 'rtl' : 'auto')
</script>

<template>
  <div :class="theme" :dir="direction">
    <router-view></router-view>
  </div>
</template>