Vue3.x+element-plus+ts踩坑笔记( 二 ) _生活百科

subMenu.vue
解决方案一：修改 main.ts
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus'import 'element-plus/es/components/button/style/css'import * as Icons from '@element-plus/icons-vue'const app = createApp(App)Object.keys(Icons).forEach(key => {app.component(key, Icons[key as keyof typeof Icons])})app.use(store)app.use(router)app.use(ElementPlus)app.mount('#app')解决方案二：将 main.ts 改回原来的
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'createApp(App).use(store).use(router).mount('#app')//公共cssimport './assets/css/index.scss'将subMenu.vue组件的 js 代码改为
import { defineComponent } from "vue";import {Document,Menu as IconMenu,Location,Setting,Menu,Grid,} from "@element-plus/icons-vue";import { useRouter } from "vue-router";import { useStore } from "vuex";export default defineComponent({components: {Document,Menu,Location,Setting,Grid,},props: {menuInfo: {type: Object,default: () => {return {id: "",parent_id: "",m_name: "",icon: "",childs: [],};},},},setup() {//路由const router = useRouter();//vuexconst store = useStore();const menuFun = (event: any, index: string) => {setNav(event);store.dispatch("setMenuActive", { menuActive: index });if (event.url && event.url.length > 0) {router.push({path: event.url,query: {},});}};const setNav = (item: any) => {store.dispatch("setNav", { nav: item });};return {menuFun,};},});</script>参考哪里忘记了，第一种是面向百度的，第二种是小颖自己试出来的
来来来找到了，参考这里；vue3 动态加载el-icon图标
3.vuex页面刷新数据丢失问题的四种解决方式解决方案：第一步：执行以下代码
npm install --save vuex-persist第二步：在 store 下的 index.ts 中引入并使用
import VuexPersistence from "vuex-persist";//解决页面刷新vuex数据丢失const vuexLocal = new VuexPersistence({storage: window.localStorage})export default createStore({state: {},getters: {},mutations: {},actions: {},modules: modules,plugins: [vuexLocal.plugin]})更多方法参考：vuex页面刷新数据丢失问题的四种解决方式
4.如何自动引入 store 下指定目录下的所有文件，此方法也适用于引入组件比如小颖要实现在 store 下的 index.ts 中自动引入 store 下的 modules 中的所有 ts

文章插图
解决方案：将 index.ts 改为：
import { createStore } from 'vuex'import VuexPersistence from "vuex-persist";//解决页面刷新vuex数据丢失const modulesFiles = require.context('./modules', false, /\.ts$/)// you do not need `import app from './modules/app'`// it will auto require all vuex module from modules fileconst modules = modulesFiles.keys().reduce((modules: any, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = https://www.huyubaike.com/biancheng/modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules}, {})const vuexLocal = new VuexPersistence({storage: window.localStorage})export default createStore({state: {},getters: {},mutations: {},actions: {},modules: modules,plugins: [vuexLocal.plugin]})后面的坑等后面写了再继续补充，最近小颖在忙着弄接的私活所以也没继续看vue3了，等这段时间忙完继续搞，打工人···················

Vue3.x+element-plus+ts踩坑笔记( 二 )

推荐阅读

裤子掉档是什么意思啊裤子掉档的怎么处理

迢迢牵牛星中脉脉的意思

分享29个营销理论什么是色彩营销？

南京有红宝石蛋糕店吗，红宝石蛋糕店

常见的美系车品牌有哪些美国汽车品牌排行榜前十名

传奇三新手必看攻略传奇3地图新手怎么样玩

黑衣人迅雷黑衣人迅雷mp4下载

一带一路什么意思一带一路是指什么

这些生肖最喜欢送对方定情信物？

2022呼和浩特疫情期间地铁进站乘车最新要求

女人排毒吃什么最好女生吃什么排毒

哈弗m6车身颜色有几种哈弗M6有哪几种颜色

吉利博越m挡什么时候用吉利博越M挡有什么用

分享华为手机换电池步骤华为智能手机怎么换电池教程

孩子有了个假想中的朋友，家长速度反思是否平时忽略了孩子？

灵芝红枣水的功效灵芝红枣水的正确煮法

亚历山大大帝东征最远到达了哪里

有没有哪些相亲渠道免费且靠谱？

身体突然长胖是因为缺乏什么因素吗？

蛋白质粉里含雌激素吗？蛋白质粉中会含有雌激素吗