1. 首頁 > 生活百科 > >

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

Vue3.x+element-plus+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了，等這段時間忙完繼續搞，打工人···················

推薦閱讀