VUEX

Vuex Setup

Hybrix Vuejs is having setup based on Vuex. The slices configurations are located in src/state folder.

Add Package

yarn add vuex

Import Package

import { createStore } from "vuex";

const store = createStore({
...
});

export default store;

Remove Package

yarn remove vuex ( you can remove package by removing specific package from package.json )

Here let's have one store name layout. Create store in src/state/pinia/layout.js

  export const state = {
    layoutType: 'vertical',
    layoutWidth: 'fluid',
    sidebarSize: 'lg',
    topbar: 'light',
    mode: 'light',
    position: 'fixed',
    sidebarView: 'default',
    sidebarColor: 'light',
    sidebarImage: 'none',
    preloader: 'disable',
    layoutTheme: 'default',
};

export const mutations = {
    CHANGE_LAYOUT(state, layoutType) {
        state.layoutType = layoutType;
    },
    CHANGE_LAYOUT_WIDTH(state, layoutWidth) {
        state.layoutWidth = layoutWidth;
    },
    CHANGE_SIDEBAR_TYPE(state, sidebarSize) {
        state.sidebarSize = sidebarSize;
    },
    CHANGE_TOPBAR(state, topbar) {
        state.topbar = topbar;
    },
    CHANGE_MODE(state, mode) {
        state.mode = mode;
    },
    CHANGE_POSITION(state, position) {
        state.position = position;
    },
    CHANGE_SIDEBAR_VIEW(state, sidebarView) {
        state.sidebarView = sidebarView;
    },
    CHANGE_SIDEBAR_COLOR(state, sidebarColor) {
        state.sidebarColor = sidebarColor;
    },
    CHANGE_SIDEBAR_IMAGE(state, sidebarImage) {
        state.sidebarImage = sidebarImage;
    },
    CHANGE_PRELOADER(state, preloader) {
        state.preloader = preloader;
    },
    CHANGE_THEMES(state, layoutTheme) {
        state.layoutTheme = layoutTheme;
    }
};

export const actions = {
    changeLayoutType({ commit }, { layoutType }) {
        commit('CHANGE_LAYOUT', layoutType);
        document.body.removeAttribute("style");
    },

    changeLayoutWidth({ commit }, { layoutWidth }) {
        commit('CHANGE_LAYOUT_WIDTH', layoutWidth);
    },

    changeSidebarSize({ commit }, { sidebarSize }) {
        commit('CHANGE_SIDEBAR_TYPE', sidebarSize);
    },

    changeTopbar({ commit }, { topbar }) {
        commit('CHANGE_TOPBAR', topbar);
    },

    changeMode({ commit }, { mode }) {
        commit('CHANGE_MODE', mode);
    },

    changePosition({ commit }, { position }) {
        commit('CHANGE_POSITION', position);
    },

    changeSidebarView({ commit }, { sidebarView }) {
        commit('CHANGE_SIDEBAR_VIEW', sidebarView);
    },

    changeSidebarColor({ commit }, { sidebarColor }) {
        commit('CHANGE_SIDEBAR_COLOR', sidebarColor);
    },

    changeSidebarImage({ commit }, { sidebarImage }) {
        commit('CHANGE_SIDEBAR_IMAGE', sidebarImage);
    },

    changePreloader({ commit }, { preloader }) {
        commit('CHANGE_PRELOADER', preloader);
    },

    changeThemes({ commit }, { layoutTheme }) {
        commit('CHANGE_THEMES', layoutTheme);
    }
};

To centralize all stores, create one file name store.js at src/state/. Import store here as per bellow,

import { createStore } from 'vuex';
import modules from './modules'; 
  const store = createStore({
    modules,
    // Enable strict mode in development to get a warning
    // when mutating state outside of a mutation.
    // https://vuex.vuejs.org/guide/strict.html
    strict: process.env.NODE_ENV !== 'production',
  });
export default store;