VueCLI3+Element后台管理系统进阶：打造模块化路由和Vuex仓库

2023-12-17 14:29:43

优化路由

在大型应用中，路由往往会变得非常复杂，因此将其模块化是一个好主意。这样可以使代码更易于维护和理解。

定义常规路由

常规路由是指那些不需要权限即可访问的页面，例如登录注册、后台主页、404页面等。这些路由通常放在一个单独的文件中，以便于管理。

// routes/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login')
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('@/views/register')
    },
    {
      path: '/404',
      name: '404',
      component: () => import('@/views/404')
    },
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/home')
    }
  ]
})

export default router

定义模块化路由

模块化路由是指那些需要权限才能访问的页面，例如用户管理、角色管理、权限管理等。这些路由通常放在不同的文件中，以便于维护和扩展。

// routes/user.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: () => import('@/views/user')
    },
    {
      path: '/user/add',
      name: 'userAdd',
      component: () => import('@/views/user/add')
    },
    {
      path: '/user/edit/:id',
      name: 'userEdit',
      component: () => import('@/views/user/edit')
    }
  ]
})

export default router

优化Vuex仓库

Vuex仓库是Vue.js中的一个状态管理工具，它可以使我们在组件之间共享状态。为了使Vuex仓库更加易于维护，我们可以将其模块化。

定义Vuex仓库

Vuex仓库通常定义在一个单独的文件中，以便于管理。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 状态
  },
  mutations: {
    // 突变
  },
  actions: {
    // 动作
  },
  modules: {
    // 模块
  },
  plugins: [
    // 插件
  ]
})

export default store

定义模块化Vuex仓库

模块化Vuex仓库是指将Vuex仓库中的状态、突变、动作和模块分拆到不同的文件中，以便于维护和扩展。

// store/user.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 用户状态
  },
  mutations: {
    // 用户突变
  },
  actions: {
    // 用户动作
  },
  getters: {
    // 用户获取器
  }
})

export default store

使用Vuex-Persistedstate插件

Vuex-Persistedstate插件可以将Vuex仓库中的状态持久化到本地存储，这样即使刷新页面，状态也不会丢失。

安装Vuex-Persistedstate插件

npm install vuex-persistedstate --save

使用Vuex-Persistedstate插件

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 状态
  },
  mutations: {
    // 突变
  },
  actions: {
    // 动作
  },
  modules: {
    // 模块
  },
  plugins: [
    new VuexPersistedstate({
      storage: window.localStorage
    })
  ]
})

export default store