vuex初步解析

原文链接:https://metricloop.com/blog/how-to-use-vuex-in-a-laravel-spark-project

期初最开始学习Vuejs2.0版本的时候,就发现它并不支持build-in的消息机制,比如$broadcast$emit之类的,因为自己之前都是使用AngularJS的,对于这个消息机制还是觉得挺方便的,尤其是在兄弟组建之间传递参数的时候(不过貌似从Angular2开始,好像也不再支持这些消息api了)。

vue的框架下,一般有两种解决方案,一种是开发一个event hub或者event busvue实例,专门来处理各种消息。另外一种方法就是使用vuex状态管理器。

code前的一点儿思考

关于这两种方法的思考如下: 一个简单的event hub,会随着前端组件的复杂化而变得越来越不受控制。另外,使用event hub的方案其实也并不像vue这个框架本身处理问题的风格。其实观察下vue2.0相比vue1.0的变化就可以发现,设计者在极力的浓缩vue的核心功能,为此他们把额外的功能放到了其他的包里面,或者依赖第三方的包,甚至直接从这个系统中移出去了。所以还是使用vuex是正道。

开始动手code

第一件事儿就是安装Vuexnpm install vuex。安装完成之后,首先需要创建一个新的文件: store.js,这里定义的就是整个app的状态管理器。

我们还需要把这个状态管理器storeveu实例结合起来,需要到入口文件app.js (根据你的实际项目而定)中引入vuex,并在注册vue实例的时候,加入store做个饭属性,这样整个应用的所有子组件就都可以获取store中的状态值了,像下面这样:

1

定义store状态管理器

在正确的引用和设置了相应的vuex之后,下面就可以来定义store了。首先需要在stoer.js文件中引入vuevuex

2

现在就可以放心大胆的创建全局的vuex store了。关于vuex下面这个官方文档中的图,可以很好的解释其中的一些关键概念:

3

可以这样理解其中的几个部分之间的关系:vue组件在接受用户的一些操作之后,可以在相应函数中想vuex提交action(dispatch action). action中,一般可以做跟后台的异步操作,然后在操作完成之后,提交mutation(commit muation),另外一个action中还可以对多个mutation进行封装,这样比较省事,这是action的俩个主要的价值,因为其实在vue组件中是可以直接commit mutation的。而mutation是唯一能改变state值的操作。在state的值发生变化之后,组件的UI得到渲染,一般组件可以通过它的computed计算属性来获得state的值,但是通用的最佳实践是通过storegetter来封装一层,再跟组件进行交互。

4

上面这段代码采用了模块化的方法来定义store,而不是把所有的东西都放在store内部,这样其实是很好的代码风格。这里主要定义了四个const,每一个都是vuex的关键组成部分。

state常量里,定义了state的初始状态值,其实就和组件的data属性是一个样的。然后在getters常量里,对count值进行了加1的操作,getter能够让组件获取countPlusOne,其实getter就和组件的computed很类似。第三个常量是mutation, 里面只有INCREMENT一个操作,这样当它被commited的时候,count值就会加1。最后一个是actions常量,里面定义一个increment action,可以从组件中被dispatch,并进一步commit INCREMENTmutation

在组件中使用Vuex中的state

定义好store中的state之后,下一步就是让vue组件和state进行交互。为此我们定义了一个很简单的组件,点击按钮实现加1效果,很简单的组件吧。

5

这是一个非常典型的Vue组件,通过.vue格式的单文件来定义。这里面有三个东西比较新鲜,这些新鲜玩意是让我们跟vuex state进行通信的。vuex提供很多方便的语法糖,这些语法糖可以让组件和vuex的交互更加方便。比如在这个组件模块中,我们引入了mapGettersmapActions,这就是组件和vuexgetteractions进行通信的映射语法糖。在computed计算属性中,我们用mapGettersstate映射到组件中。注意到这里采用了对象语法,{‘count’: ‘countPlusOne’}, 相当于是把countPlusOne重命名为count. 同样的方法,也可以用mapActionsincrement action映射到组件的method里。注意这里都使用了这种扩展运算符。

Leave a Reply

Your email address will not be published. Required fields are marked *