# State Management

### Pinia

​[Pinia](https://pinia.vuejs.org/) 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.

```typescript
const Sidebar_drawer = ref(config.Sidebar_drawer);
const Customizer_drawer = ref(config.Customizer_drawer);
const mini_sidebar = ref(config.mini_sidebar);
const setHorizontalLayout = ref(config.setHorizontalLayout);
const actTheme = ref(config.actTheme as ThemeMode);
const systemPreference = ref(false);
const fontTheme = ref(config.fontTheme);
const inputBg = ref(config.inputBg);
const boxed = ref(config.boxed);
const themeContrast = ref(config.themeContrast);
const isRtl = ref(config.isRtl);
const presetColor = ref(config.presetColor);
```

### Writing Getters & Action

```javascript
export const useContactStore = defineStore("contact", {
  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;
      }
  }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://phoenixcoded.gitbook.io/able-pro/vue-laravel/development/state-management.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.