State Management

Managing State, Getters & Action

Pinia

Pinia is a store library for Vue, it allows you to share a state across components/pages.

If you are familiar with the Composition API, you might be thinking you can already share a global state with a simple export const state = reactive({}).

This is true for single-page applications but exposes your application to security vulnerabilities if it is server-side rendering.

State

Based on this information, we should now be able to describe the kinds of values we need to have inside our state.

 sidebarCollapse: false,
  actTheme: 'light',
  isRtl: false,
  presetColor: 'preset-1',

Writing Getters & Action

import { ref } from 'vue'

// third party
import { defineStore } from 'pinia'

// files
import config from '@/config'
import { DirAttrSet } from '@/utils/utils'

export const useCustomizerStore = defineStore('customizer', () => {
  const sidebarCollapse = ref(config.sidebarCollapse)
  const actTheme = ref(config.actTheme)
  const isRtl = ref(config.isRtl)
  const presetColor = ref(config.presetColor)

  function SET_SIDEBAR_COLLAPSE(payload: boolean) {
    sidebarCollapse.value = payload
  }

  function SET_THEME(payload: string) {
    actTheme.value = payload
  }

  function SET_DIRECTION(dir: 'ltr' | 'rtl') {
    isRtl.value = dir === 'rtl'
    DirAttrSet(dir) // Call _setDirAttr to set the direction attribute
  }

  function SET_PRESETCOLOR(payload: string) {
    presetColor.value = payload
  }

  return {
    sidebarCollapse,
    actTheme,
    isRtl,
    presetColor,
    SET_SIDEBAR_COLLAPSE,
    SET_THEME,
    SET_DIRECTION,
    SET_PRESETCOLOR,
  }
})