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.vue
File
<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>
Requires regular data binding. In this case, use an observer.
Please make sure not to access
document
when rendering on the server side.Try placing your content in another element instead of modifying the
document
. Additionally, use computed properties for responsiveness.