pinia using storeToRefs

frontend/src/components/DistrictSelect.vue

@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useAppStore } from '@/stores/app'
-import { mapState } from 'pinia'
+import { storeToRefs } from 'pinia'
 import router from '@/router'
 
 const appStore = useAppStore()
-//const districts = appStore.getDistricts
-const districts = computed({
-  get() {
-    return appStore.getDistricts
-  },
-  set(newValue) {
-    console.log(newValue) //TODO set districts in store? what am I doing here
-  }
-})
+const { districts } = storeToRefs(appStore)
 
 const selectedDistrict = ref({}) // placeholder
 function goToDistrict() {
@@ -30,7 +22,7 @@ function goToDistrict() {
 
 <template>
   <div>
-    {{ selectedDistrict }}
+    <!-- {{ districts }} -->
     <!-- <v-autocomplete
       v-model="selectedDistrict"
       label="Select a District"

frontend/src/stores/app.ts

@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { storeToRefs, defineStore } from 'pinia';
 
 interface District {
   districtId: string;
@@ -42,11 +42,11 @@ export const useAppStore = defineStore('app', {
     }
   },
   getters: {
-    getDistricts(): District[] {
-      return this.districts;
+    getDistricts: (state) => {
+      return () => state.districts
     },
-    getSchools(): School[] {
-      return this.schools;
+    getSchools: (state) => {
+      return () => state.schools
     }
   }
 });

frontend/src/views/ListDistricts.vue

@@ -12,12 +12,12 @@
 </template>
 <script>
 import { useAppStore } from '@/stores/app'
-import { toRefs, watchEffect } from 'vue';
+import { storeToRefs } from 'pinia'
 
 export default {
   setup() {
     const appStore = useAppStore()
-    const { districts } = toRefs(appStore);
+    const { districts } = storeToRefs(appStore);
     return { districts }
   }
 }