Vue-element-admin project code learning – 02-vuex

preface

Vue-element-admin project code learning, other articles refer to:

Vue-element-admin project code learning -01-main.js

Without further ado, go to the code

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules'.true./\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) = > {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/.'$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

Copy the code

Vuex data in the project is managed in a modular way. In modules, the following modules are defined: User, tagsView, Settings, Permission, errorLog, app, etc. In the corresponding JS file, you can clearly see the corresponding fields and methods.

Import the specified file module

const modulesFiles = require.context('./modules', true, /\.js$/)

Webpack API, Get a specific context by executing require.context, which is used to automate the import of modules. In front end engineering, if many modules are imported from a folder, use this API, which iterates through the specified files in the folder and automatically imports, eliminating the need to explicitly call the IMPO each time Rt Import module.

Require. context takes three arguments

1. Directory {String} – Read the file path

UseSubdirectories {Boolean} – Specifies whether a file subdirectory should be directories directories

3. RegExp {regExp} – Matches the re of the file

Require. context returns a function that has three properties

1. Resolve {Function} – Takes request, which is the relative path of the matched file under the test folder, and returns the relative path of the matched file relative to the entire project

2. Keys {Function} – Returns an array of the names of successfully matched modules

3. Id {String} – The id of the execution environment, which returns a String, mainly used in module.hot.accept.

All three of these are properties of functions.

In the code, the array composed of names is obtained by keys method, and the file name xxx.js is replaced by XXX through regular replacement. Then, modules objects named key and value of each file are obtained by traverse using reduce, and finally introduced into VUEX.

modules/getter.js

Converting the data in State in VUEX is analogous to computing attributes. And you can see in the project that he’s defined here and then values in the data don’t have to be nested anymore.

modules/user.js

The user’s token,name, roles and so on are all processed in this file. Mutations are applied to the defined field data, and the login login method is defined asynchronously in actions to obtain the user’s token. Then, the token is transferred through the getInfo method to obtain the permission table. Fields such as name. The logout method is called when you exit the login. Both methods use promises internally to handle asynchrony. Dynamically modify user permissions using the changeRoles method, reset the token, permission table, dynamic routing, and so on. It can be seen that the modularization of the project is done well, according to the function of different API interfaces, public methods, etc., in their own projects worth learning.

modules/tagsView.js

The TAB TAB data is processed in this file. The page defines visitedViews and cachedViews TAB arrays, one for normal and one for caching. In addition, methods such as adding, editing, and deleting data are defined based on services.

modules/settings.js

Global configuration item Settings file, which defines whether to display the right page Settings button, tagsView, sidebar logo, etc.

modules/permission.js

Routing table data definition, the page defines the user routing table field, defines the generateRoutes method through the pass permission, from the Router file defined in the dynamic route filter has the current permission routing table. Then mutations modifies the data.

  generateRoutes({ commit }, roles) {
    return new Promise(resolve= > {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
Copy the code

Modules/errorlog. js: collect errorLog data

Modules /app.js: The sidebar state, the overall text size of the page. Use with cookies.

Personal study, may understand the lack of place, thank ~