I want to be able to change the orientation of the page when the value in Pinia changes, the code runs fine but the page will reload and I don't want the page to reload.
This is my App.vueFile
<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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Requires regular data binding. In this case, use an observer.
watch( language, value => { if (value === 'ar') document.documentElement.setAttribute('dir','rtl') else document.documentElement.removeAttribute('dir') }, { immediate: true } )Please make sure not to access
documentwhen rendering on the server side.Try placing your content in another element instead of modifying the
document. Additionally, use computed properties for responsiveness.<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>