Vue之Vuex的简单部署

随着项目的不断增大,发现很多组件中的数据重复,接口重复调用(由其是一些基础的接口),这时候嘛~就想着把一些公用的数据以及接口抽离出来,做一个全局共享。

好了有了想法,就开始实施~Vuex闪亮登场啦!

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

首先进入项目内~

npm insatll vuex --save

在src下新建stores文件夹


然后在main.js中引入,挂载到app跟组件中



好了,准备工作已经完毕~下来就开始正式部署吧!

首先看一下结构:


分六个JS,我们挨个分析;

actions.js :处理一些异步操作,比如一些公共接口什么的。

getter.js:这里主要是做一些数据的处理,比如后端返回的时间不是你想要的,你做一个时间格式化等等。

mutation-types.js:这是重点了!因为一个大型项目,需要多人的合作,但是每个人所负责的模块又不是很一样,这是后就需要在这里进行类别区分了 ~例如下面这样子的 ~


每一个类型都要有他相应的作用,这些在其他人查阅,或者使用时都是一个很友好的提示~要是还是个妹子在看【手动滑稽】

当然这样写的话 在mutations中用法也会有一点点的不同~下面会讲到的!

mutations:这是核心~,vuex作为全局状态管理,所有的状态都必须有mutations进行,commit去触发,而且,他必须是同步的,同步的,同步的,重要的事情说三遍,所谓同步就是挨着处理,有个顺序,但是在使用过程中你会发现,其实异步已经在action里面进行了~commit当然仅仅是一个同步了 ~~

因为使用了mutation-types所以,mutations的使用略有不同~如下:

要把所有的mutations引入到mutations中,然后就可按类型就行你所需要的操作了~当然还是加上注释比较好的·、。。。(我好像忘记加了。。。补上补上)


state.js:这个所有共享数据以及状态值啦~


index.js:就是抛出的JS啦


这里讲一下createLogger()这个方法主要是看一下vuex执行的日志~


以上就是vuex的简单部署啦

猜你喜欢

转载自blog.csdn.net/qq_39480597/article/details/79611487