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.
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;
}
}
});
Last updated