From a1b6fdc36cbb7818aef09780af4af1ada51413e4 Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Wed, 18 Sep 2024 15:06:18 +0200
Subject: [PATCH] docs: add pinia order in contribution

---
 contribution-guides/vue-typescript.md | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/contribution-guides/vue-typescript.md b/contribution-guides/vue-typescript.md
index 541e8d6..6fbf130 100644
--- a/contribution-guides/vue-typescript.md
+++ b/contribution-guides/vue-typescript.md
@@ -135,6 +135,45 @@ defineExpose({
 });
 ```
 
+### Pinia Store
+
+For pinia stores the suggested order for elements is the following.
+
+```typescript
+// stores/counter.ts
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  // 1. State
+  const count = ref<number>(0);
+
+  // 2. Getters
+  const doubleCount = computed(() => count.value * 2);
+
+  // 3. Actions
+  function increment(): void {
+    count.value++;
+  }
+
+  function decrement(): void {
+    count.value--;
+  }
+
+  // 4. Watchers
+  watch(count, (count) => {
+    // do something
+  });
+
+  return {
+    count,
+    doubleCount,
+    increment,
+    decrement,
+  };
+});
+```
+
 ### useCssModules
 
 It should be only used if there is some access to the css module class names inside the script tag.