跟你们说说vuex

什么是vuex

--Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这是vuex官网上的说法,其实就说对vue程序进行状态管理的.那么问题来了,什么又是状态管理?

首先我们不管什么是状态管理,想一想我们常规的管理都实现了那些功能.也就是所谓的增删改查吧,具体点就是取数据然后修改数据或者删除数据最后保存数据,更新我们的视图.vuex做的就是这些事情,只不过他们操作的是状态,而对于vue来说状态是什么,状态就是数据,因为vue基于数据驱动,数据变了状态就变了.

vuex官网说的状态管理应该有以下几个部分:

想一想其实就是用户通过一些方法改变了我们的数据,数据变化之后重新渲染view,view上的提供给用户的交互依然可以触发action做同样的状态变化.

vuex就是在这部分进行管理,只不过比上面的例子要复杂.

接下来就让我们看看,vuex具体是怎么做到这些的.

以上就是最经典的vuex的仓库(store),vuex将需要管理的状态以及管理方式都放在Store中,然后我们操作Store即可.

一个Store至少要包含state和mutation.

state就是需要管理的数据,一般是根据项目需要自己定义数据结构.

有了数据之后,我们就可以对他们进行操作.getters就是取数据的操作,既然是取操作就不能对数据进行更改,也就是说getter的操作不会改变原数据.一般是做筛选过滤的时候有所体现,比如:选出所有同学中打篮球的,选出所有项目已经上线的...有点像数据库select from where

 

我们在getter 中封装函数得到数据,然后在实例的计算属性中调用,这就是getter存在的意义:如果有多个组件需要这个属性,我们可以轻易调用获取数据.

取到数据之后我们对其进行更改然后保存实现状态的更新.这就是mutations的功能.说的更准确更具体一点,mutation只是改完数据保存到state.mutation也是vuex种唯一能改变状态的方式,vuex不是直接去操作改变state,他必须要通过mutation.mutation更像是一个注册方法,functionType : handle(state){},这个handle就是改变状态的地方,接受state为参数.而触发mutation的方式就是提交相应的事件类型:store.commit('functionType'),而不能直接调用.

 

 

可以看到我们在实例中的methods只是简单调用提交mutation中的方法,而真正的具体的实现在Store中.

那么actions 呢,actions其实就是上面的整个过程,getter取到数据然后修改最后通过mutation保存.所以如果不涉及到对数据进行处理可以不写action,直接交给mutation,当然action存在还是有意义的,他可以进行异步的操作处理,这是mutation做不到的.

actions的触发需要store.dispatch.

在实例的methods方法里不再是直接触发之前的mutation,而是组件先分发action,通过action去触发mutation.虽然有些时候这样的操作很多余,但是action存在的意义就是为了解决mutation只能同步执行的问题,也就是说action可以异步操作,上面的setTimeout说明了一切.

几点说明

这里只介绍了vuex入门的入门, 使用vuex只需要建立一个独立的store.js,或者组件多的情况下,建立store文件夹保存对应store.js.

或者单个的store.js文件太大,也可以将里面的actions,getters,mutations拆分为对应文件,然后引入.

vuex中对上面的几个核心对象都提供了辅助函数, mapGetters, mapActions等他们的目的是优化代码结构,简单地项目可以不使用他们,所以本文没有介绍.

可能有些东西不懂,有些API看不懂, 但是有些东西用着用着就明白了,尝试不断自我摸索.

 

推荐文章: Vuex, 从入门到入门