feat: use Pinia instead Vuex

package.json

@@ -15,6 +15,7 @@
     "@vueform/multiselect": "^2.2.0",
     "@vueuse/core": "^6.5.3",
     "idb": "^6.1.4",
+    "pinia": "*",
     "vue": "^3.2.19",
     "vue-i18n": "^9.2.0-beta.9",
     "vue-router": "^4.0.11",

src/components/DamageCalculator.vue

@@ -66,18 +66,22 @@
 
       <section v-if="side.hero" class="skills">
         <SelectSkillButtons
-          v-for="skill in data.skills"
+          v-for="skill in store.skills"
           :key="`attacker-skill-${skill.name}-buttons`"
           color="attacker"
           :name="skill.name"
-          :levels="data.levels.slice(1, data.levels.length)"
+          :levels="store.levels.slice(1, store.levels.length)"
           @click="side.hero!.skills[skill.name.toLowerCase()] = $event as number"
         />
       </section>
 
       <section v-if="side.activeCreature" class="effects">
         <div
-          v-for="(effectGroup, i) in [attackPositiveEffects, defensePositiveEffects, attackNegativeEffects]"
+          v-for="(effectGroup, i) in [
+            store.attackPositiveEffects,
+            store.defensePositiveEffects,
+            store.attackNegativeEffects,
+          ]"
           :key="`attacker-effects-group-${i}`"
         >
           <template v-for="effect in effectGroup" :key="`attacker-effect-${effect}`">
@@ -98,15 +102,15 @@
     </section>
 
     <div class="calculator-footer">
-      <SelectTerrain :terrains="data.terrains" @select-terrain="onSelectTerrain($event)" />
+      <SelectTerrain :terrains="store.terrains" @select-terrain="onSelectTerrain($event)" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, watch } from '@vue/runtime-core'
-import { computed, reactive, ref } from '@vue/reactivity'
-import type { Battle, BattleSide, DamageCalculatorBattleSide } from '@/models/Battle'
+import { reactive, ref } from '@vue/reactivity'
+import type { Battle, DamageCalculatorBattleSide } from '@/models/Battle'
 import { CreatureInstance } from '@/models/Creature'
 import type { Creature } from '@/models/Creature'
 import { useI18n } from 'vue-i18n'
@@ -115,12 +119,9 @@ import SelectHero from '@/components/SelectHero.vue'
 import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
 import type { Hero } from '@/models/Hero'
-import type { Skill } from '@/models/Skill'
-import type { Level } from '@/models/Level'
-import { Spells } from '@/models/enums'
-import { getDatabaseStore, initDatabaseStore } from '@/database'
 import type { Terrain } from '@/models/Terrain'
 import SelectTerrain from '@/components/SelectTerrain.vue'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'DamageCalculator',
@@ -142,10 +143,13 @@ export default defineComponent({
   },
   setup(props) {
     const { t } = useI18n()
+    const store = useStore()
+
     const battle = reactive(props.battleValue)
-    const battleSides: Array<BattleSide> = ['attacker', 'defender']
     const isStarted = ref(false)
 
+    store.initData()
+
     watch(
       [battle.attacker, battle.defender],
       () => {
@@ -161,26 +165,6 @@ export default defineComponent({
       if (newIsStarted) isStarted.value = false
     })
 
-    let data = reactive({
-      skills: [] as Array<Skill>,
-      levels: [] as Array<Level>,
-      spells: [] as Array<Spell>,
-      terrains: [] as Array<Terrain>,
-    })
-
-    getDatabaseStore('creatures').then((creatures) => {
-      if (!creatures.length) {
-        initDatabaseStore('classes')
-        initDatabaseStore('creatures')
-        initDatabaseStore('heroes')
-        initDatabaseStore('levels').then((result) => (data.levels = result))
-        initDatabaseStore('skills').then((result) => (data.skills = result))
-        initDatabaseStore('spells').then((result) => (data.spells = result))
-        initDatabaseStore('terrains').then((result) => (data.terrains = result))
-        initDatabaseStore('towns')
-      }
-    })
-
     const totalDamage = (side: DamageCalculatorBattleSide) => {
       const { minDamage, maxDamage, averageDamage } = side.activeCreature!.calculation
       if (minDamage > 0 && minDamage !== maxDamage) {
@@ -203,29 +187,6 @@ export default defineComponent({
       }
     }
 
-    const attackPositiveEffectsIds = [
-      Spells.Bless,
-      Spells.Bloodlust,
-      Spells.Frenzy,
-      Spells.Prayer,
-      Spells.Precision,
-      Spells.Slayer,
-    ]
-
-    const attackPositiveEffects = computed(() => {
-      return data.spells.filter((spell) => attackPositiveEffectsIds.indexOf(spell.id) !== -1)
-    })
-
-    const defensePositiveEffectsIds = [Spells.Shield, Spells.StoneSkin, Spells.AirShield]
-    const defensePositiveEffects = computed(() => {
-      return data.spells.filter((spell) => defensePositiveEffectsIds.indexOf(spell.id) !== -1)
-    })
-
-    const attackNegativeEffectsIds = [Spells.Curse, Spells.Weakness, Spells.DisruptingRay]
-    const attackNegativeEffects = computed(() => {
-      return data.spells.filter((spell) => attackNegativeEffectsIds.indexOf(spell.id) !== -1)
-    })
-
     const onSelectCreature = (side: DamageCalculatorBattleSide, creature: unknown) => {
       const newCreature = new CreatureInstance(creature as Creature)
 
@@ -276,11 +237,9 @@ export default defineComponent({
 
     return {
       t,
+      store,
+
       battle,
-      data,
-      attackPositiveEffects,
-      defensePositiveEffects,
-      attackNegativeEffects,
 
       totalDamage,
       totalKills,

src/components/SelectHero.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, defineAsyncComponent, watch } from 'vue'
+import { defineComponent, ref, defineAsyncComponent, watch, computed } from 'vue'
 import Multiselect from '@vueform/multiselect'
 import type { Hero, HeroInstance } from '@/models/Hero'
-import { getDatabaseStore } from '@/database'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'SelectHero',
@@ -50,10 +50,10 @@ export default defineComponent({
   },
   emits: ['selectHero'],
   setup(props, context) {
-    const selectedHero = ref(props.value?.id)
-    const heroes = ref<Array<Hero>>([])
+    const store = useStore()
 
-    getDatabaseStore('heroes').then((heroes_) => (heroes.value = heroes_))
+    const selectedHero = ref(props.value?.id)
+    const heroes = computed(() => store.heroes)
 
     watch(selectedHero, (id) =>
       context.emit(

src/components/damageCalculator/PickCreatureButton.vue

@@ -3,7 +3,12 @@
     <slot />
   </button>
 
-  <SelectUnitModal :show="showSelectUnitModal" @close="showSelectUnitModal = false" @select="$emit('select', $event)" />
+  <SelectUnitModal
+    v-if="showSelectUnitModal"
+    :show="showSelectUnitModal"
+    @close="showSelectUnitModal = false"
+    @select="$emit('select', $event)"
+  />
 </template>
 
 <script lang="ts">

src/components/damageCalculator/SelectUnitModal.vue

@@ -62,9 +62,8 @@
 import { computed, defineAsyncComponent, defineComponent, ref } from 'vue'
 import BaseModal from '@/components/base/BaseModal.vue'
 import type { Creature } from '@/models/Creature'
-import type { Town } from '@/models/Town'
 import { useI18n } from 'vue-i18n'
-import { getDatabaseStore } from '@/database'
+import { useStore } from '@/store'
 
 export default defineComponent({
   name: 'SelectUnitModal',
@@ -77,14 +76,10 @@ export default defineComponent({
   setup(props, context) {
     const { t } = useI18n()
     const search = ref('')
-    const towns = ref([] as Town[])
-    const creatures = ref([] as Array<Creature>)
-
-    getDatabaseStore('creatures').then((result) => (creatures.value = result))
-    getDatabaseStore('towns').then((result) => (towns.value = result))
+    const { creatures, towns } = useStore()
 
     const filterCreaturesByName = computed((): Creature[] => {
-      return creatures.value.filter((creature: Creature) => {
+      return creatures.filter((creature: Creature) => {
         const searchText = search.value.toLowerCase()
         const creatureName = creature.name.toLowerCase()
         return creatureName.indexOf(searchText) > -1
@@ -111,41 +106,20 @@ export default defineComponent({
     return {
       t,
       creatures,
+      towns,
+
+      search,
+      filterCreaturesByName,
+
       selectUnit,
       selectFirstFounded,
-      filterCreaturesByName,
       onClose,
-      towns,
-      search,
     }
   },
 })
 </script>
 
 <style lang="scss" scoped>
-.modal-units {
-  width: 90%;
-  min-width: 200px;
-  margin: auto;
-  margin-top: 20px;
-  background-color: rgb(255, 255, 255);
-  border-radius: 0.3rem;
-  outline: 0;
-  min-height: 100%;
-
-  @include media-medium {
-    width: 100%;
-  }
-
-  @include media-large {
-    width: 95%;
-  }
-
-  @include media-large {
-    width: 85%;
-  }
-}
-
 .units-modal-content {
   flex-direction: column;
   width: 100%;

src/main.ts

@@ -1,7 +1,7 @@
 import App from '@/App.vue'
 import i18n from '@/i18n'
 import router from '@/router'
-import store from '@/store'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
-createApp(App).use(i18n).use(router).use(store).mount('#app')
+createApp(App).use(i18n).use(router).use(createPinia()).mount('#app')