详解vue组件化开发-vuex状态管理库


Posted in Javascript onApril 10, 2017

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

以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。

为什么要用vuex

不知道现在读这篇博客的同学是否有看过Vue2.0子父组件之间通信,子父组件之间的基本通信方式。我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态。但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分混乱。对所有状态的管理便会显得力不从心,尤其是多人合作的时候。

此时vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理

Vuex的核心

vuex由以下几部分组成:

  1. state
  2. mutations
  3. getters
  4. actions
  5. modules

state里面就是存放项目中需要多组件共享的状态

mutations就是存放更改state里状态的方法

getters就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态。

actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作。

modules顾名思义,就是当用这个容器来装这些状态还是显得混乱的时候,我们就可以把容器分成几块,把状态和管理规则分类来装。这和我们创建js模块是一个目的,让代码结构更清晰。

实例来理解Vuex

// 实例化vuex状态库
var vuexStore = new Vuex.Store({
 state:{
  message:'Hello World',
  bookList:[
   {
    name:'javascript权威指南',
    price:100,
    en:'jq'
   },
   {
    name:'angularjs权威指南',
    price:80,
    en:'aq'
   },
   {
    name:'HTTP权威指南',
    price:50,
    en:'hq'
   }
  ]
 },
 mutations:{
  //同步
  showMessage:function(state,data){
   state.message = 'Store mutations changed this words。'+data;
  }
  addBook:function(state,data){
   state.bookList.push(data)
  }
 },
 getters:{
  filterPrice:function(state){
   var narr = [];
   for(var i = 0;i<state.bookList.length;i++){
    state.bookList[i].price<85 ? narr.push(state.bookList[i]) : null;
   }
   return narr;
  }
 },
 actions:{
  //异步操作
  addBook:function(context){
   setTimeout(function(){
    context.commit('addBook',{name:'HTML5权威指南',price:75});
   },2000);
  }
 },
 modules:{
  a:storeA,b:storeB
 }
});

// vue 实例
var vm = new Vue({
el:'app',

store:VuexStore,

methods:{
  showMessage:function(){



this.$store.commit('showMessage','荷载数据')


},
  filterList:function(){
   return this.store.getters.filterPrice();
  },
  addBooks:function(){



this.$store.dispatch('addBook')


},

}
});

【state】vuex核心概念有五个,试想当我们把所有的状态从各个组件抽出来,放入了state中:message和bookList;

【mutations】某个时候,某个组件中,我们需要把state中的message改变数据,我们要通过调用commit方法提交到mutations对应的事件:commit('showMessage'),这样就会调用mutations里showMessage方法;调用方法是如上面代码中57行的方式;

【getters】某个时间,某个组件我们需要获得bookList中价格小于85的所有数据,vuex中允许我们通过getters来获取:使用方法如上代码中60行

【actions】这个是mutations的强化部分,只是这个里面的函数可以异步操作,比如网络请求等等;这里面的方法如果要更改状态,最好要通过commit()函数提交到mutations里去处理。官方是这么说的。在实例里调用一般是通过dispatch('funName')来调用的;例如实例中:66行代码

【关于moduls】modules其实就是多个状态管理库,放在一个对象里,比如我们有2个状态库:storeA,storeB。我们在modules里就和上面代码中50行的写法是一样的。

 在取值的时候就直接在实例里调用:this.$store.state.a即可返回storeA这个store里的状态。

这里有一个点要注意一下:所有子模块里的getters对象里的方法会被合并到$store里,如果不同子模块里有重名的方法,那么会报错;

但是所有子模块里actions和mutations中的方法不会被合并,重名也不会报错。但是当你dispatch或者commit一个同名的事件的时候,会依次执行每一个子模块中的事件。

所以在不同子模块的actions和mutations中不要写重复的函数名称;

使用Vuex

下面我们来讲一下怎么引入一个Vuex协助我们管理状态:

首先当然要引入Vuex.js;

然后,我们新建一个vuex实例

var store = new VuexStore({
 state:{
  } ,
  mountations:{
  },  
 })

创建好store后我们需要把这个store注入到vue的实例和组件中,

var vm = new Vue({
 el:'#app',
 store:store 
 })

然后我们就能像上面介绍的方法使用了。

最后多说一嘴,官方建议的目录结构是吧mutations,actions,getters等一系列,都分开放在不同的目录,便于多人开发与维护。

vue到此已经研究了很多。行百里者半九十,还需要深入研究。个人对vue2.0的总结demo已上传至gitHub。地址:https://github.com/HUA1/vue2-summary.git

本文到此结束,所涉及的vue版本是2.0.x;vuex版本是:2.2.1。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
node中的cookie的具体使用
Sep 13 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
详解vue.js全局组件和局部组件
Apr 10 #Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 #Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
vue构建单页面应用实战
Apr 10 #Javascript
bootstrap suggest下拉框使用详解
Apr 10 #Javascript
You might like
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP 8新特性简介
2020/08/18 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
javascript实现计算器功能
2020/03/30 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
浅谈python锁与死锁问题
2020/08/14 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
安全生产计划书
2014/05/04 职场文书
律师催款函范文
2015/06/24 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
简单介绍Python的第三方库yaml
2021/06/18 Python