Able Pro
Vue Laravel
Vue Laravel
  • Documentation
  • Installation
  • Directory Structure
  • ⛱️Theme UI
    • 🎛️Icons
    • 👓Change Logo
    • 🆎Change Typography
    • 🔮Theme Colors
    • ⚙️Theme Settings
    • ⬅️RTL
  • 👩‍💻Development
    • Database Connection
    • Sanctum Integration
    • Sanctum Authentication
    • Frontend API
    • State Management
    • Axios API Calls
    • Routing
  • Perfect Scrollbar
  • Layouts
  • Create a new page
  • Remove Auth
  • Dependencies
  • Roadmap
  • Changelog
Powered by GitBook
On this page
  • Pinia
  • State
  • Writing Getters & Action
  1. Development

State Management

Managing State, Getters & Action

PreviousFrontend APINextAxios API Calls

Last updated 1 year ago

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.

sidebarDrawer: config.sidebarDrawer,
customizerDrawer: config.customizerDrawer,
miniSidebar: config.miniSidebar,
isHorizontalLayout: config.isHorizontalLayout, // Horizontal layout
actTheme: config.actTheme,
fontTheme: config.fontTheme,
inputBg: config.inputBg,
themeContrast: config.themeContrast,
boxed: config.boxed,
isRtl: config.isRtl,

Writing Getters & Action

export const useContactStore = defineStore({
  id: 'contact',
  state: (): contactType => ({
      contact: [],
      selectedContact: null
  }),
  getters: {},
  actions: {
      // Fetch contacts
      async fetchContacts() {
          try {
              const data = await axios.get('/api/contact/list');
              this.contact = data.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },
      // Fetch contacts
      async editContacts(contact: UserProfile) {
          try {
              const response = await axios.post('/api/contact/modify', contact);
              this.contact = response.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },
      // Fetch contacts
      async addContacts(contact: UserProfile) {
          try {
              const response = await axios.post('/api/contact/add', contact);
              this.contact = response.data;
          } catch (error) {
              alert(error);
              console.log(error);
          }
      },

      //select chat
      SelectContact(itemID: any) {
          this.selectedContact = itemID - 1;
      }
  }
});
👩‍💻
Pinia