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

中科医院专家微信 http://m.39.net/pf/a_4580328.html

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

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

官方文档是这样介绍的:

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

newVue({

//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进行加工之后派生出来的数据,和


转载请注明:http://www.aierlanlan.com/tzrz/1532.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了