Multiplexage de modules en vuex

Wang 2Hao 2021-10-13 18:55:28
multiplexage modules en vuex


VuexMultiplexage des modules en

Contexte du problème

Au cours de l'élaboration réelle du projet,On va l'utiliser.VuexPour gérer beaucoup de données,Toutes les données publiques du projet sont stockées dansstoreMoyenne,Facilite l'interaction entre les différents composants avant.Mais les données du projet ont légèrement augmenté,Le nombre de modules augmente rapidement,Un grand nombre de fonctions similaires sont insérées entre les différents modules,Il arrive souvent qu'un seul changement se produise et que tout le corps soit déplacé,Cela rend le développement et l'entretien difficiles.

Solutions

Module commun(Le module lui - même ne sera pas chargé dansvuexMoyenne)

J'ai extrait les fonctions répétitives qui apparaissent dans les différents modules,Dans un seul module,Pour utiliser d'autres modules.Parce que ce module lui - même ne sera pas chargé dansvuexMoyenne,Nous pouvons donc l'interpréter directement comme une simple bibliothèque.

// common.js
// Même fonction pour chaque module,Collection gérée dans ce module commun
export default {
namespaced: true,
state:{ /*...*/ },
getters: { /*...*/ },
mutations:{ /*...*/ },
actions:{
test(){
console.log("test common")
}
}
}
Copier le Code
AModule

N'oubliez pas de faire une copie profonde après l'introduction du module commun,J'ai utilisélodash

Si une partie du module commun est complètement inutilisable,Peut ressembler àA Dans le module , Couverture directe du module commun actions

//A.js
import common from "./common.js"
import cloneDeep from "lodash/cloneDeep"
let itemA = cloneDeep(common)
//DéfinitionADu moduleactions
let actions = {
test(){
console.log("test common AAA")
},
testA(){
console.log("test AAA")
}
}
// Pour écraser le module commun actions
itemA.actions = actions
export default itemA
Copier le Code
BModule

Si vous avez besoin d'ajouter des fonctionnalités à un module commun ,Peut ressembler àB Dans le module , Nouveau et ancien actionsFusionner

//B.js
import common from "./common.js"
import cloneDeep from "lodash/cloneDeep"
let itemB = cloneDeep(common)
let actions = {
testB(){
console.log("test BBB")
}
}
//Fusionner actions
itemB.actions = {...itemB.actions, ...actions}
export default itemB
Copier le Code

L'affaire est actionsExemple d'objet, D'autres objets comme :state, getters, mutations Et ainsi de suite avec actionsMême chose.

vuexFichier d'entrée

Le Code du fichier d'entrée n'est pas différent de celui du projet général , Il suffit d'introduire des modules individuels dans le projet .

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import itemA from "./itemA.js"
import itemB from "./itemB.js"
Vue.use(Vuex)
export default new Vuex.Store({
modules : {
itemA,
itemB
},
state: { },
getters: { },
mutations: { },
actions: { }
})
Copier le Code

Enfin

Après avoir été géré comme ça ,store Les différents modules de . Qu'il s'agisse de développer de nouvelles fonctionnalités ou d'apporter des modifications aux fonctionnalités existantes , Ce sera très facile .

版权声明
本文为[Wang 2Hao]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013185524795z.html

  1. 前端开发框架Vue中Vuex的使用原理分享
  2. vue-echarts初次体验
  3. 分享一些web前端开发好用的网站
  4. 每天读一点webpack-003
  5. react之组件生命周期
  6. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  7. SpringBoot Java后端实现okhttp3超时设置
  8. react之組件生命周期
  9. Cycle de vie des composants de React
  10. 使用Reactor将阻塞调用变为异步非阻塞
  11. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  12. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  13. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  14. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  15. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  16. 如何解决“Serverless”系统的冷启动问题
  17. BootstrapBlazor 模板安装
  18. BootstrapBlazor 模板安装
  19. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  20. 使用ESLint+Prettier来统一前端代码风格
  21. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  22. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  23. 使用elementui在完成项目中遇到的未知知识点2
  24. On the mechanism of webpack loader
  25. 云原生体系下 Serverless 弹性探索与实践
  26. vue开发技巧
  27. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  28. 致敬!再见了!LayUI !
  29. Vue安装和卸载
  30. Implement a flipped character with the transform attribute of CSS
  31. 你的第一个 Docker + React + Express 全栈应用
  32. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  33. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  34. 前端技巧-JS元编程ES6 symbol公开符号
  35. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  36. 前端推荐!10分钟带你了解Konva运行原理
  37. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  38. 零基础学习Web前端需要注意什么呢?
  39. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  40. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  41. JavaScript数组 几个常用方法
  42. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?
  43. 暢談this的四種綁定方式
  44. 2021最新Vue面试必胜宝典,大厂面试题解析!
  45. Quatre façons de lier ceci
  46. Préparation au développement de l'extension tagdown
  47. Intervieweur: Parlez - moi des flotteurs CSS
  48. Packaging the View Component Library with rollup
  49. Comment un composant enfant modifie les valeurs passées par le composant parent
  50. Résumé de l'API Express
  51. Optimisation de la structure du Code if else dans le projet
  52. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  53. 新手学前端的方法是什么 自学前端该怎么规划
  54. 云原生体系下 Serverless 弹性探索与实践
  55. 如何全方位打造安全高效的HTTPS站点(一)
  56. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  57. 从理念到LRU算法实现,起底未来React异步开发方式
  58. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  59. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  60. 云原生体系下 Serverless 弹性探索与实践