simpler store

.vscode/settings.json

@@ -9,16 +9,6 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
 
-  "cSpell.enableFiletypes": ["markdown", "!typescript", "!json"],
-  "cSpell.words": [
-    "Astrologia",
-    "Codium",
-    "Dolibarr's",
-    "Kamal",
-    "Kamalātmikā",
-    "Yantra",
-    "protovue",
-    "tmik",
-    "windi"
-  ]
+  "editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
+  "editor.fontLigatures": true
 }

src/components/App.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Basket from '@/components/Basket.vue'
+import Basket from './Basket.vue'
 declare const APP_TITLE: string,
   APP_VERSION: string,
   APP_REPOSITORY: string,

src/components/Basket.vue

@@ -3,30 +3,28 @@
   <div>
     <button
       class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-      @click="inc1"
+      @click="addProduct"
     >
-      order product n°{{ products }}
+      order product n°{{ data.products }}
     </button>
     <button
       class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-      @click="price++"
+      @click="data.price++"
     >
-      inc price {{ price }}€
+      inc price {{ data.price }}€
     </button>
     <button
       class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
       @click="decPrice"
     >
-      dec price {{ price }}€
+      dec price {{ data.price }}€
     </button>
   </div>
-  <p>
-    TOTAL HT = {{ global.state.count }}€ <br />
-    TOTAL TTC = {{ global.getters.ttc.value }}€
-  </p>
+  <p>TOTAL HT = {{ state.count }}€ <br /></p>
+  <p>TOTAL HT = {{ ttc }}€ <br /></p>
   <button
     class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-    @click="global.actions.reset()"
+    @click="reset"
   >
     RESET
   </button>
@@ -34,24 +32,28 @@
 
 <script lang="ts">
 import global from '@/stores/global'
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive } from 'vue'
+
 export default defineComponent({
   props: {
     msg: { type: String, required: true }
   },
   setup() {
-    const products = ref(1)
-    const price = ref(5)
-    return { products, price, global }
-  },
-  methods: {
-    inc1() {
-      this.products++
-      global.actions.inc(this.price)
-    },
-    decPrice() {
-      if (this.price > 1) this.price--
+    const data = reactive({
+      products: 1,
+      price: 10
+    })
+    const { state, ttc, inc, reset } = global
+
+    function decPrice() {
+      if (data.price > 1) data.price--
+    }
+
+    const addProduct = () => {
+      data.products++
+      inc(data.price)
     }
+    return { data, state, ttc, reset, decPrice, addProduct }
   }
 })
 </script>

src/stores/global.ts

@@ -1,24 +1,24 @@
-import { computed, reactive, readonly } from "vue"
+import { computed, reactive, readonly } from 'vue'
 
+//CONSTANTS
+const TVA = 8.5
 
+//STATE
 const state = reactive({
-    count: 0,
+  count: 0
 })
 
-const ttc = computed(
-    () => state.count * 1.085
-)
+//COMPUTED
+const ttc = computed(() => (state.count * (100 + TVA)) / 100)
 
+//ARROW FUNCTION
 const inc = (amount: number): number => {
-    return (state.count += amount)
+  return (state.count += amount)
 }
 
+//STANDARD FUNCTION
 function reset(): number {
-    return state.count = 0
+  return (state.count = 0)
 }
 
-export default {
-    state: readonly(state),
-    getters: { ttc },
-    actions: { inc, reset }
-}
+export default { state: readonly(state), ttc, inc, reset }

tsconfig.json

@@ -8,8 +8,8 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "noEmit": true,
-    "baseUrl": ".",
     "strict": true,
+    "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
     }