rework store usage

src/pages/rules/EditCharacterRuleBook.vue

@@ -8,19 +8,16 @@ import {
   useCharacterRuleBooksStore,
   useRuleBooksStore
 } from "@/rules";
-import {storeToRefs} from "pinia";
 import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/ledger";
 
 type Bindings = { [key: string]: Ledger; };
 
 const ruleBookStore = useRuleBooksStore();
-const {findById: findRuleBookById} = ruleBookStore;
-const {ruleBooks} = storeToRefs(ruleBookStore);
-const {findByCharacterId, setForCharacter} = useCharacterRuleBooksStore();
-const {findById: findCharacterById} = useCharactersStore();
-const {ledgers} = storeToRefs(useLedgersStore());
+const characterRuleBooksStore = useCharacterRuleBooksStore();
+const charactersStore = useCharactersStore();
+const ledgersStore = useLedgersStore();
 
-const ledgersToUse = computed(() => [systemLedger, ...ledgers.value.filter(isMain)]);
+const ledgersToUse = computed(() => [systemLedger, ...ledgersStore.ledgers.filter(isMain)]);
 
 const character = ref<Character>();
 const ruleBook = ref<RuleBook>();
@@ -31,9 +28,9 @@ watchEffect(async () => {
   const characterId = character.value?.characterId;
 
   if (characterId) {
-    const characterRuleBook = findByCharacterId(characterId);
+    const characterRuleBook = characterRuleBooksStore.findByCharacterId(characterId);
 
-    ruleBook.value = findRuleBookById(characterRuleBook?.ruleBook.ruleBookId ?? '');
+    ruleBook.value = ruleBookStore.findById(characterRuleBook?.ruleBook.ruleBookId ?? '');
     bindings.value = Object.fromEntries(
       Object.entries(characterRuleBook?.bindings ?? {})
         .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])
@@ -46,7 +43,7 @@ const save = () => {
   const ruleBookId = ruleBook.value?.ruleBookId;
 
   if (characterId && ruleBookId) {
-    setForCharacter(characterId, {
+    characterRuleBooksStore.setForCharacter(characterId, {
       ruleBookId,
       bindings: Object.fromEntries(
         Object.entries(bindings.value)
@@ -60,7 +57,7 @@ watch(useRoute(), async route => {
   if (route.params.characterId) {
     const id = parseInt(typeof route.params.characterId === 'string' ? route.params.characterId : route.params.characterId[0]);
 
-    character.value = await findCharacterById(id);
+    character.value = await charactersStore.findById(id);
     log.info('Loaded character:', character.value);
   } else {
     character.value = undefined;
@@ -80,7 +77,7 @@ watch(useRoute(), async route => {
     <div class="flex-col border-b-1">
       Rule Book:
       <select class="me-2 mb-2 w-50" v-model="ruleBook">
-        <option v-for="rb in ruleBooks" :key="rb.ruleBookId" :value="rb">{{ rb.name }}</option>
+        <option v-for="rb in ruleBookStore.ruleBooks" :key="rb.ruleBookId" :value="rb">{{ rb.name }}</option>
       </select>
     </div>
     <div class="flex-col border-b-1">