global store

TODO.md

@@ -13,11 +13,11 @@ ARCHITECTURE
 * [x] composition API
 * [x] windi-css
 * [x] npm version 7
+* [x] store solution
 * [ ] fake rest api
 * [ ] i18n
 * [ ] axios
-* [ ] store solution
-  * [ ] vue3 handcraft solution OR 
+
 
 
 FEATURES

src/components/Basket.vue

@@ -1,18 +1,35 @@
 <template>
   <h1>{{ msg }}</h1>
+  <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"
+    >
+      order product n°{{ 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++"
+    >
+      inc price {{ 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 }}€
+    </button>
+  </div>
+  <p>
+    TOTAL HT = {{ global.state.count }}€ <br />
+    TOTAL TTC = {{ global.getters.ttc.value }}€
+  </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="inc1"
+    @click="global.actions.reset()"
   >
-    inc product {{ count1 }}
+    RESET
   </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="inc2"
-  >
-    inc {{ count2 }}
-  </button>
-  state = {{ state.count }}
 </template>
 
 <script lang="ts">
@@ -23,19 +40,17 @@ export default defineComponent({
     msg: { type: String, required: true }
   },
   setup() {
-    const count1 = ref(0)
-    const count2 = ref(0)
-    const { state } = global
-    return { count1, count2, state }
+    const products = ref(1)
+    const price = ref(5)
+    return { products, price, global }
   },
   methods: {
     inc1() {
-      console.warn(`inc1 ${this.count1}`)
-      this.count1++
+      this.products++
+      global.actions.inc(this.price)
     },
-    inc2() {
-      console.error(`inc2 ${this.count2}`)
-      this.count2++
+    decPrice() {
+      if (this.price > 1) this.price--
     }
   }
 })

src/stores/global.ts

@@ -1,7 +1,24 @@
-import { reactive } from "vue"
+import { computed, reactive, readonly } from "vue"
+
+
+const state = reactive({
+    count: 0,
+})
+
+const ttc = computed(
+    () => state.count * 1.085
+)
+
+const inc = (amount: number): number => {
+    return (state.count += amount)
+}
+
+function reset(): number {
+    return state.count = 0
+}
 
 export default {
-    state: reactive({
-        count: 404
-    })
+    state: readonly(state),
+    getters: { ttc },
+    actions: { inc, reset }
 }