前端开发框架Vue中Vuex的使用原理分享

IT小尚 2021-10-13 11:32:14
前端 Vue.js


前端培训开发工作中,Vue.js的使用是主流技术,尤其是项目开发过程中只要使用到涉及Vue的状态管理就必然会用到Vuex。本篇博文就来分享一下关于Vuex的相关知识点,方便后期查阅使用。

1、首先来了解一下Vuex是什么?

官方文档是这样介绍的:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。事例如下所示:

new Vue({

// state

data () {

return {

count: 0

}

},

// view

template: <div>{{ count }}</div> ,

// actions

methods: {

increment () {

this.count++

}

}

})

Vuex 作为Vue官方推出的状态管理框架,而且其具有便捷、简单API设计的开发工具支撑,在大中小Vue项目中得到很好的应用,很好的结合了Vue的响应式数据。

2、接着再来了解一下为什么要使用Vuex?

先来了解一个知识点:Vue是单向数据流的方式驱动的,流程图如下所示:

(该图来源于网络,如有侵权请联系作者删除)

state,驱动应用的数据源;

view,以声明方式将 state 映射到视图;

actions,响应在 view 上的用户输入导致的状态变化。

上述是一个单向数据流理念的简单示意流程,如果应用遇到多个组件共享状态的时候,单向数据流的简洁性就很容易遭到破坏。当多个视图依赖于同一个状态,或者来自不同视图的行为需要更改同一个状态,这时候就需要用到Vuex。Vuex是类似于Redux的状态管理器,用来管理Vue的所有组件状态,采用集中式存储管理应用的所有组件的状态,并且以相应的规则来保证状态以一种可预测的方式发生变化。还有在前端模块化项目中,用到某些变量需要在全局范围内引用的时候,也可以用到Vuex来解决。

3、Vuex的构成

(该图来源于网络,如有侵权请联系作者删除)

通过上图可以看到Vuex由以下几个部分组成:

(1)State

State单一状态树,是存储的单一状态,存储的是基本数据;

(2)Getters

Getter是从State中派生出来的,属于store的计算属性对State进行加工之后派生出来的数据,和computed的计算属性一样,getter的返回的值会根据它的依赖进行缓存处理,而且只有当它的依赖值发生变化改变的时候才会被重新计算;

(3)Mutations

Mutation是提交修改的数据,通过使用store.commit方法更改state的存储状态,mutation必须是同步函数;

(4)Actions

Action类似Mutation,但是Action提交的是Mutation,而不是直接改变状态,还可以包含任何异步操作;

(5)Modules

Module是由store分割成的模块,每个模块都拥有自己的state、getter、mutation、action,以及嵌套子模块(从上到下进行同样方式的分割)

4、Vuex其他

(1)Vuex 动态注册模块:

Vuex 通常使用静态模块,这些模块在打包的时候都会打到 app.js 中,但是若有的模块过大而且不是必须立马用到的,就可以动态的注册模块到 vuex 中。

在使用Vuex 某个模块的时候再进行注册:

mounted () {

this.$store.registerModule('myModule', MyModule)

}

在不使用的时候,注销该模块:

beforeDestroy () {

this.$store.unregisterModule('myModule')

}

这样实现的效果是该页面在加载时才下载模块内容,而不是刚访问网站就去下载该模块内容。

(2)Vuex的项目结构

Vuex不限制代码结构,但是规定了一些需要遵守的规则:应用层级的状态需要集中到单个store对象中;提交mutation是更改状态的唯一方法,且该过程是同步的;异步逻辑都应该封装到action里面。

最后,Vuex的状态存储是响应式的,当Vue组件从store中读取状态时,若store中的状态发生变化,那么相应的组件也会得到高效更新。Vuex是通过全局注入store对象来实现组件之间的状态共享,如果在中大型项目中时,想要实现某个组件改变某个数据,多个组件自动获取更改后的数据来进行业务逻辑处理,这时候就要适用Vuex;如果在项目中只是多个组件间传递数据,没有其他复杂操作,适用组件间常用通信方式即可,没必要使用Vuex。

版权声明
本文为[IT小尚]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000040804655

  1. Nodejs + Serverless实现LaTeX公式渲染服务
  2. Analyse des questions d'entrevue: déstockage des tableaux et complexité temporelle
  3. Flux de données pour l'analyse des sources de vue
  4. Take group photos, sing songs and write blessings... Everyone on the Fuxing train celebrates the national day
  5. React核心 -- React-Hooks
  6. Mise en œuvre du Service de rendu de formule latex par nodejs + serverless
  7. React Core - React Hooks
  8. After autumn, wear less black, white and gray, and choose more gentle "light colors"
  9. Wu Qili sent blessings on the national day. She looked haggard and thin on her own. It was worrying
  10. Grand sens de la vue à la fois, la force dure est excellente, toute la série 2.0t, le film réel 2021 haver h9!
  11. With the blessing of Toyota power, GAC motor's new gs8 is open for pre-sale, starting from 188800 yuan
  12. Test drive Xingyue L: the price is less than 200000, but there are 400000 cards. Is it inevitable to sell more than 10000 a month?
  13. Entrevue de première ligne 3 + 1 tous les jours - jour 909
  14. Entrevue de première ligne 3 + 1 par jour - jour 910
  15. Xiao Zhan's 18 word blessing copy triggered a heated discussion, and fans expressed their attitude and wished the motherland together
  16. Engineering Knowledge Card 005: comment webpack injecte - t - il les ressources JS emballées dans html?
  17. ant design vue 设置表格选择框,全选按钮选不全
  18. 五分钟掌握用Vue脚手架搭建一个完整项目!
  19. 100 questions d'entrevue Python de base partie 2 (41 - 60)
  20. 五分鐘掌握用Vue脚手架搭建一個完整項目!
  21. ant design vue 設置錶格選擇框,全選按鈕選不全
  22. Cinq minutes pour construire un projet complet avec l'échafaudage vue!
  23. La vue de conception ant définit la zone de sélection de la table, le bouton sélectionner tout n'est pas sélectionné
  24. vuex中助手函数的几种使用技巧总结
  25. La nouvelle voiture roule à grande vitesse, le tableau de bord apparaît "tasse de café" prompt, directement au magasin 4S!
  26. Résumé de plusieurs techniques d'utilisation de la fonction Helper dans vuex
  27. Un disciple féminin est venu à guozijian: Zhuo Wenyuan a été complètement noirci, et le frère aîné de sang qi a été blessé par lui!
  28. JavaScript - - quatre façons de juger les types de données
  29. HTTPS|SSL笔记-SSL分手过程(Encrypted Alert)
  30. The film arrangement rate exceeds 40%, and the box office exceeds 390 million in less than two days! Why is Changjin lake?
  31. Nouvelle grande expérience de prise de vue en direct 2022 Geely Howe
  32. Apprenez à connaître CSS - Comment organiser votre code CSS
  33. Can the Zero run C11 with less than 200000 become the leader of medium-sized pure electric SUV?
  34. Https | SSL Notes - SSL break Process (encrypted Alert)
  35. HTTPS|SSL筆記-SSL分手過程(Encrypted Alert)
  36. Récemment, j'a i été interrogé par des fans sur les génériques Java, donc j'ai regardé en arrière et j'espère que l'entrevue de mon frère cadet se passera bien.
  37. Comment utiliser la nouvelle spécification es dans votre projet
  38. JavaScript - - orienté objet
  39. South Korean actress Liu Renna, wearing a white strapless skirt and walking on the red carpet, has a hot body and attracts eyes. She smiles so sweet
  40. Nginx (3): process model
  41. Projet Java: système de gestion du rendement des employés (Java + SSM + MySQL + Maven + HTML)
  42. CSS tips | one line of code to realize the integration of avatar and national flag
  43. Maotai and Paris Fashion Week joined hands to make Chinese elements appear on the show
  44. Wang Xiaoya showed up in a sleeveless skirt and reappeared her intellectual elegance. She was still full of temperament after leaving the nest CCTV
  45. Comment écrire un document de conception frontale
  46. Créer une api javascript haute performance avec Rust et l'exécuter dans webassembly
  47. Analyse de certains principes techniques clés du SDK de surveillance frontale
  48. Point de vue: la NFT de type portrait a formé un modèle d'entreprise. Quelles sont ses perspectives d'avenir et ses difficultés?
  49. Stars celebrate the motherland's birthday in patterns: Tang Yan Bixin, Liu Xiaoqing in military uniform, Zhao Liying and he Jiong send blessings
  50. L'amour entre Wing Mei et Luan Tree: de l'amour à première vue à l'amour éternel
  51. Disappeared car companies: tape measure is useless? Zhongtai is on the verge of death and has no way to return to heaven
  52. BUUCTF [极客大挑战 2019]Http
  53. element缓存到本地使用
  54. How can the volunteer army with less steel and more gas beat the American army with more steel and less gas? Changjin Lake gives you the answer
  55. CentOS installation source package nginx error
  56. Mise en cache des éléments pour utilisation locale
  57. Disappeared car companies: tape measure is useless? Zhongtai is on the verge of death and has no way to return to heaven
  58. He saifei est si naturel!58 ans est si beau, porter des vêtements de vieillesse pour accepter de vieillir!
  59. Finally pregnant! Seven years of pregnancy, collective blessing of the entertainment industry
  60. Wu Qili sent blessings on the national day. She looked haggard and thin on her own. It was worrying