Store
Creating a Store
In Pinia, a Store is created using the defineStore function, which returns a function that provides an instance of the Store. The Store contains state, actions, and computed properties (getters).
// src/stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore({
id: 'user',
state: () => ({
name: 'John Doe',
age: 30
}),
actions: {
updateName(name) {
this.name = name;
}
},
getters: {
fullName: (state) => `${state.name} Doe`
}
});
In this example, useUserStore is a Store containing the state properties name and age, an action updateName to update the name, and a getter fullName to compute the full name.
Using a Store
A Store can be used in any Vue component by calling the useStore function to retrieve the Store instance.
// src/components/UserProfile.vue
import { useUserStore } from '../stores/user';
export default {
setup() {
const userStore = useUserStore();
return {
userStore
};
}
};
Here, the UserProfile component uses the setup function to access the user Store instance via useUserStore.
Reactive Updates
Pinia’s Store state is reactive, meaning any changes to the state automatically trigger updates in components that depend on it.
// src/components/UserProfile.vue
import { useUserStore } from '../stores/user';
export default {
setup() {
const userStore = useUserStore();
function changeName(newName) {
userStore.updateName(newName);
}
return {
userStore,
changeName
};
}
};
In this example, the changeName function updates the state by calling userStore.updateName, triggering a re-render of the component.
Type Safety in Stores
Pinia integrates well with TypeScript, providing type-safe Store definitions.
// src/stores/user.ts
import { defineStore } from 'pinia';
interface UserState {
name: string;
age: number;
}
export const useUserStore = defineStore('user', {
state: (): UserState => ({
name: 'John Doe',
age: 30
}),
actions: {
updateName(name: string) {
this.name = name;
}
},
getters: {
fullName: (state): string => `${state.name} Doe`
}
});
Here, the UserState interface ensures type safety for the Store’s state, actions, and getters.
Store Persistence
Pinia does not provide built-in state persistence but supports it via the pinia-plugin-persistedstate plugin.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import persistedState from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(persistedState);
createApp(App).use(pinia).mount('#app');
Modular Stores
Pinia supports modular Stores, allowing multiple Stores to be created and used independently.
// src/stores/post.js
import { defineStore } from 'pinia';
export const usePostStore = defineStore({
id: 'post',
state: () => ({
posts: []
}),
actions: {
addPost(post) {
this.posts.push(post);
}
}
});
In this example, the post Store is independent of the user Store, enabling modular state management.
