So ändern Sie die Seitenrichtung in Vue, ohne die Seite zu aktualisieren

Question

Ich möchte die Ausrichtung der Seite ändern können, wenn sich der Wert in Pinia ändert. Der Code läuft einwandfrei, aber die Seite wird neu geladen, und ich möchte nicht, dass die Seite neu geladen wird.

Das ist meine App.vueDatei

<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

需要进行常规数据绑定。在这种情况下，使用一个观察者来实现。

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

请确保在服务器端渲染时不要访问document。

Answer 2

尝试将您的内容放在另一个元素中，而不是修改document。此外，使用计算属性进行响应性。

<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>