feat:router store

src/.eslintrc.json

@@ -4,6 +4,9 @@
     "axios": true,
     "computed": true,
     "createApp": true,
+    "createLogger": true,
+    "createNamespacedHelpers": true,
+    "createStore": true,
     "customRef": true,
     "dayjs": true,
     "defineAsyncComponent": true,
@@ -16,6 +19,10 @@
     "inject": true,
     "isReadonly": true,
     "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapMutations": true,
+    "mapState": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -50,6 +57,7 @@
     "useRoute": true,
     "useRouter": true,
     "useSlots": true,
+    "useStore": true,
     "watch": true,
     "watchEffect": true
   }

src/App.vue

@@ -1,11 +1,6 @@
 <template>
     <div id="app">
-        <h1>
+        <router-view />
-            <span>马士兵严选</span>
-            <XIcon name="vue" svg color="red" size="30" />
-            <XIcon name="msb" svg size="30"></XIcon>
-            <XIcon name="app-store" size="30" />
-        </h1>
     </div>
 </template>
 

src/auto-imports.d.ts

@@ -5,6 +5,9 @@ declare global {
   const axios: typeof import('axios')['default']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
+  const createLogger: typeof import('vuex')['createLogger']
+  const createNamespacedHelpers: typeof import('vuex')['createNamespacedHelpers']
+  const createStore: typeof import('vuex')['createStore']
   const customRef: typeof import('vue')['customRef']
   const dayjs: typeof import('dayjs')
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -17,6 +20,10 @@ declare global {
   const inject: typeof import('vue')['inject']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('vuex')['mapActions']
+  const mapGetters: typeof import('vuex')['mapGetters']
+  const mapMutations: typeof import('vuex')['mapMutations']
+  const mapState: typeof import('vuex')['mapState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -51,6 +58,7 @@ declare global {
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
+  const useStore: typeof import('vuex')['useStore']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
 }

src/components.d.ts

@@ -4,8 +4,8 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    SvgIcon: typeof import('./components/SvgIcon.vue')['default']
     XIcon: typeof import('./components/XIcon.vue')['default']
   }
 }

src/main.js

@@ -3,4 +3,12 @@ import App from './App.vue';
 
 import '@/icons';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+
+import router from '@/router';
+app.use(router);
+
+import store from '@/store';
+app.use(store);
+
+app.mount('#app');

src/router/index.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+// 静态路由
+const routes = [
+    {
+        path: '/',
+        component: () => import('@/views/index.vue'),
+    },
+];
+
+// 动态模块
+const modules = import.meta.globEager('./modules/*.js');
+Object.values(modules).forEach((mod) => {
+    routes.push(...mod.default);
+});
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;

src/router/modules/demo.js

@@ -0,0 +1 @@
+export default [];

src/store/index.js

@@ -0,0 +1,21 @@
+import { createStore } from 'vuex';
+
+const modules = Object.fromEntries(
+    Object.entries(import.meta.globEager('./modules/*.js')).map((entry) => {
+        let arr = entry[0].split('/').pop().split('.');
+        arr.pop();
+        let moduleName = _.camelCase(arr.join('-'));
+        return [
+            moduleName,
+            {
+                ...entry[1].default,
+                namespaced: true,
+            },
+        ];
+    })
+);
+const store = createStore({
+    strict: process.env.NODE_ENV !== 'production',
+    modules,
+});
+export default store;

src/store/modules/demo.js

@@ -0,0 +1,20 @@
+const state = () => ({
+    count: 0,
+});
+const getters = {
+    doubleCount: (state) => state.count * 2,
+};
+const mutations = {
+    add: (state, num = 1) => (state.count += num),
+};
+const actions = {
+    clear: ({ state, commit }) => {
+        commit('add', state.count * -1);
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/views/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div id="app">
+        <h1>
+            <span>马士兵严选</span>
+            <XIcon name="vue" svg color="red" size="30" />
+            <XIcon name="msb" svg size="30"></XIcon>
+            <XIcon name="app-store" size="30" />
+        </h1>
+        <p>count:{{ count }}, double count:{{ doubleCount }}</p>
+        <el-button type="primary" @click="handleAdd">add</el-button>
+        <el-button type="danger" @click="handleClear">clear</el-button>
+    </div>
+</template>
+
+<script setup>
+    const store = useStore();
+    const count = computed(() => store.state.demo.count);
+    const doubleCount = computed(() => store.getters['demo/doubleCount']);
+    const handleAdd = () => {
+        store.commit('demo/add');
+    };
+    const handleClear = () => {
+        store.dispatch('demo/clear');
+    };
+</script>
+
+<style lang="less"></style>

vite.config.ts

@@ -41,6 +41,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
                 include: [/\.[jt]sx?$/, /\.vue\??/],
                 imports: [
                     'vue',
+                    'vuex',
                     'vue-router',
                     {
                         axios: [