store init

.vscode/settings.json

@@ -5,12 +5,16 @@
   "vetur.validation.interpolation": true,
   "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"
+    "tmik",
+    "windi"
 ]
 }

README.md

@@ -16,11 +16,7 @@ npm run dev
 HOW TO DEBUG
 ------------
 
-```
-# open codium IDE
-codium .
-# , then launch Debug in Firefox (or Chromium)
-```
+Codium / Debug in Firefox
 
 HOW TO DEPLOY
 -------------

TODO.md

@@ -5,7 +5,7 @@ ARCHITECTURE
 ------------
 
 * [x] vite + vue3 (up-to-date)
-* [x] typescript suppport
+* [x] typescript support
 * [x] codium debug (Firefox, Chromium)
 * [x] git version control awareness
 * [x] eslint
@@ -18,15 +18,13 @@ ARCHITECTURE
 * [ ] axios
 * [ ] store solution
   * [ ] vue3 handcraft solution OR 
-  * [ ] [pinia](https://github.com/posva/pinia)
-    * [ ] [devtool-v3](https://github.com/vuejs/vue-devtools/releases)
 
 
 FEATURES
 --------
 
 * [ ] grab products, categories and images from Dolibarr's API
-  * [ ] parallelization
+  * [ ] parallelize
   * [ ] scheduled action
   * [ ] cache for images
 * [ ] login/logout

src/App.vue

@@ -32,6 +32,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import Basket from './components/Basket.vue'
+declare const APP_TITLE, APP_VERSION, APP_REPOSITORY, APP_LICENSE
 
 export default defineComponent({
   components: {
@@ -39,7 +40,6 @@ export default defineComponent({
   },
   setup() {
     return {
-      /* eslint-disable no-undef */
       title: APP_TITLE,
       version: APP_VERSION,
       repository: APP_REPOSITORY,

src/components/Basket.vue

@@ -2,35 +2,40 @@
   <h1>{{ msg }}</h1>
   <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="count++"
+    @click="inc1"
   >
-    inc product {{ count }}
+    inc product {{ count1 }}
   </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="inc"
+    @click="inc2"
   >
-    inc
+    inc {{ count2 }}
   </button>
+  state = {{ state.count }}
 </template>
 
 <script lang="ts">
+import global from '@/stores/global'
 import { defineComponent, ref } from 'vue'
 export default defineComponent({
   props: {
     msg: { type: String, required: true }
   },
   setup() {
-    return {
-      count: ref(0)
-    }
+    const count1 = ref(0)
+    const count2 = ref(0)
+    const { state } = global
+    return { count1, count2, state }
   },
   methods: {
-    inc() {
-      // console.log('log count')
-      console.warn('warn count')
-      console.error('err count')
-      this.count++
+    inc1() {
+      console.warn(`inc1 ${this.count1}`)
+      this.count1++
+    },
+    inc2() {
+      console.error(`inc2 ${this.count2}`)
+      this.count2++
     }
   }
 })

src/main.ts

@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import './index.css'
 import 'windi.css'
 
-// define title and version from package.json
-// eslint-disable-next-line no-undef
+import App from '@/App.vue'
+import '@/assets/index.css'
+
+declare const APP_TITLE: string
 document.title = APP_TITLE
 
 createApp(App).mount('#app')

src/shims-vue.d.ts

@@ -5,7 +5,7 @@ declare module '*.vue' {
 }
 
 /* declare const which helps leveraging visibility of defined constants, loaded from `main.ts` file */
-declare const APP_VERSION: string
-declare const APP_TITLE: string
-declare const APP_REPOSITORY: string
-declare const APP_LICENSE: string
+// declare const APP_VERSION: string
+// declare const APP_TITLE: string
+// declare const APP_REPOSITORY: string
+// declare const APP_LICENSE: string

src/stores/global.ts

@@ -0,0 +1,7 @@
+import { reactive } from "vue"
+
+export default {
+    state: reactive({
+        count: 404
+    })
+}

vite.config.ts

@@ -2,6 +2,7 @@ import pkg from './package.json'
 import { execSync } from 'child_process'
 import vue from '@vitejs/plugin-vue'
 import WindiCSS from 'vite-plugin-windicss'
+import { resolve } from "path"
 
 export default {
 	plugins: [
@@ -13,7 +14,12 @@ export default {
 		APP_VERSION: JSON.stringify(buildVersion()),
 		APP_REPOSITORY: JSON.stringify(pkg.repository),
 		APP_LICENSE: JSON.stringify(pkg.license),
-    }
+	},
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "src"),
+		},
+	},
 }
 
 // FUNCTIONS