Pinia is the recommended state management plugin in Vue applications.
Though you can use it with the “Option API” way, if you are using TypeScript, go for the “Composition API” way. Yes, even within the stores, you can use the setup pattern.
With JavaScript, you would have, for example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import { ref } from 'vue';
import { defineStore } from 'pinia';
import useSampleData from '@/composables/useSampleData';
const { categoriesData } = useSampleData();
export const useCategoryStore = defineStore('CategoryStore', {
state: {
categories = ref(categoriesData);
},
getters: {
getCategoryById = (categoryId) => {
const match = this.categories.value.find(
(category: Category) => category.id === categoryId
);
if (match === undefined) return {};
return match;
}
}
});
|
With TypeScript, it becomes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import { ref } from "vue";
import { defineStore } from "pinia";
import useSampleData from "@/composables/useSampleData";
import type Category from "@/types/Category";
const { categoriesData } = useSampleData();
export const useCategoryStore = defineStore("CategoryStore", () => {
//STATE
const categories = ref(categoriesData);
//GETTERS
const getCategoryById = (categoryId: string | undefined): Category => {
const match = categories.value.find(
(category: Category) => category.id === categoryId
);
if (match === undefined) return {};
return match;
};
return { categories, getCategoryById };
});
|
The arrow function you see after the name of the store uses the function definition with the setup pattern.
Special thanks to :
