convert ts

README.md

@@ -21,3 +21,5 @@ npm install vuex save
 
 npm install axios save
 
+npm install @types/node --save-dev
+

package.json

@@ -15,6 +15,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/node": "^17.0.24",
     "@vitejs/plugin-vue": "^2.3.1",
     "typescript": "^4.5.4",
     "vite": "^2.9.2",

src/main.ts

@@ -4,6 +4,6 @@ import App from './App.vue'
 // @ts-ignore
 import router from './router/index'
 // @ts-ignore
-import store from './store/index'
+import {store,key} from './store/index'
 
-createApp(App).use(router).use(store).mount('#app')
+createApp(App).use(router).use(store,key).mount('#app')

src/router/index.js

@@ -1,23 +0,0 @@
-import {createRouter,createWebHashHistory} from 'vue-router'
-
-import Home from '../views/tst/Home.vue'
-
-const routes = [
-    {
-        path: '/',
-        name: 'Home',
-        component: Home
-    },
-    {
-        path: '/about',
-        name: 'About',
-        component: () => import('../views/tst/About.vue')
-    }
-]
-
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes
-})
-
-export default router

src/router/index.ts

@@ -0,0 +1,24 @@
+import {createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw} from 'vue-router'
+
+import Home from '../views/tst/Home.vue'
+
+const routes: Array<RouteRecordRaw> =
+    [
+        {
+            path: '/',
+            name: 'Home',
+            component: Home
+        },
+        {
+            path: '/about',
+            name: 'About',
+            component: () => import('../views/tst/About.vue')
+        }
+    ]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+})
+
+export default router

src/store/index.js

@@ -1,10 +0,0 @@
-import {createStore} from 'vuex'
-
-export default createStore({
-    state: {
-        num: 0
-    },
-    mutations:{},
-    actions:{},
-    modules:{}
-})

src/store/index.ts

@@ -0,0 +1,31 @@
+import {InjectionKey} from 'vue'
+import {createStore, useStore as baseUseStore, Store} from 'vuex'
+
+// 为 store state 声明类型
+export interface State {
+    num: number
+}
+
+// 定义 injection key
+export const key: InjectionKey<Store<State>> = Symbol()
+
+export const store = createStore<State>({
+    state: {
+        num: 888
+    },
+    mutations: {
+        setNum(state: State, num: number) {
+            state.num = num
+        }
+    },
+    getters: {
+        getNum(state: State) {
+            return state.num
+        }
+    }
+})
+
+// 定义自己的 `useStore` 组合式函数
+export function useStore() {
+    return baseUseStore(key)
+}

src/views/tst/About.vue

@@ -1,12 +1,26 @@
 <template>
-  <div>{{name}}</div>
+  <div>{{ name }} -- {{ showCount }}</div>
+  <button @click="addBtn">addBtn</button>
 </template>
 
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, computed} from 'vue'
+import {useStore} from '../../store/index'
+
+const store = useStore()
+const showCount = computed(() => {
+  return store.getters.getNum
+})
+const count = ref(showCount.value)
 
 const name = ref('this is about')
+
+const addBtn = () => {
+  store.commit('setNum', ++count.value)
+}
+
+
 </script>
 
 <style scoped>

tsconfig.json

@@ -8,7 +8,7 @@
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": false,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },

vite.config.ts

@@ -1,7 +1,20 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import {resolve} from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+    plugins: [vue()],
+    server: {
+        host: '0.0.0.0',
+        port: 3000,
+        open: true
+    },
+    resolve: {
+        alias: [
+            {
+                find: '@',
+                replacement: resolve(__dirname, 'src')
+            }
+        ]
+    }
 })