Bir template içinde şöyle bişey var
import { defineStore } from 'pinia';
export const useThemeSettingsStore = defineStore('themeSettings',{
state: () => ({
sidebarCollaspe: false,
sidebarHidden: false,
mobielSidebar: false,
semidark: false,
monochrome: false,
semiDarkTheme: "semi-light",
isDark: false,
skin: "default",
theme: "light",
isOpenSettings: false,
cWidth: "full",
menuLayout: "vertical",
navbarType: "sticky",
isMouseHovered: false,
footerType: "static",
direction: false,
chartColors: {
title: "red",
},
}),
actions: {
setSidebarCollasp() {
this.sidebarCollasp = !this.sidebarCollasp;
},
toogleDark() {
this.isDark = !this.isDark;
document.body.classList.remove(this.theme);
this.theme = this.theme === "dark" ? "light" : "dark";
document.body.classList.add(this.theme);
localStorage.setItem("theme", this.theme);
},
toggleMonochrome() {
const isMonochrome = (localStorage.getItem('monochrome') !== null);
// this.monochrome = !this.monochrome;
if(isMonochrome) {
localStorage.removeItem("monochrome");
document.getElementsByTagName( 'html' )[0].classList.remove('grayscale');
return;
}
localStorage.setItem("monochrome", true);
document.getElementsByTagName( 'html' )[0].classList.add('grayscale');
return;
},
toggleSettings() {
this.isOpenSettings = !this.isOpenSettings;
},
toggleMsidebar() {
this.mobielSidebar = !this.mobielSidebar;
},
toggleSemiDark() {
this.semidark = !this.semidark;
this.semiDarkTheme = this.semidark ? "semi-dark" : "semi-light";
document.body.classList.toggle(this.semiDarkTheme);
localStorage.setItem("semiDark", this.semidark);
},
},
})
ve heryerde de ayar için burayı kullanıyor
örneğin
<Sidebar
v-if="
this.$store.themeSettingsStore.menuLayout === 'vertical' &&
this.$store.themeSettingsStore.sidebarHidden === false &&
window.width > 1280
"
/>
yada
<Transition name="mobilemenu">
<mobile-sidebar
v-if="window.width < 1280 && this.$store.themeSettingsStore.mobielSidebar"
/>
</Transition>
şeklinde tü şartları this.$store ifadesiyle yukardaki themeSettings.js dosyasındaki bu store dan alıyor yok state' den alıyor bunu nasıl kendime göre çevirip bu themeSettings.js dosyssı yerine kendi yapımı kullanabilirim ? Vue için yapılmış ben bunu jetstreamde kullanmaya çalışıyorum örneğin Applayout altına burdaki fonksiyonlarımı yazmalıyım ?