在前端开发工作中,Vue.js的使用是主流技术,尤其是项目开发过程中只要使用到涉及Vue的状态管理就必然会用到Vuex。本篇博文就来分享一下关于Vuex的相关知识点,方便后期查阅使用。1、首先来了解一下Vuex是什么?官方文档是这样介绍的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。事例如下所示:new Vue({ // state data () { return { count: 0 } }, // view template: `
{{ count }}
`, // actions methods: { increment () { this.count++ } }})Vuex 作为Vue官方推出的状态管理框架,而且其具有便捷、简单API设计的开发工具支撑,在大中小Vue项目中得到很好的应用,很好的结合了Vue的响应式数据。2、接着再来了解一下为什么要使用Vuex?先来了解一个知识点:Vue是单向数据流的方式驱动的,流程图如下所示:
(该图来源于网络,如有侵权请联系作者删除)
-
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
(该图来源于网络,如有侵权请联系作者删除)
通过上图可以看到Vuex由以下几个部分组成:(1)StateState单一状态树,是存储的单一状态,存储的是基本数据;(2)GettersGetter是从State中派生出来的,属于store的计算属性对State进行加工之后派生出来的数据,和computed的计算属性一样,getter的返回的值会根据它的依赖进行缓存处理,而且只有当它的依赖值发生变化改变的时候才会被重新计算;(3)MutationsMutation是提交修改的数据,通过使用store.commit方法更改state的存储状态,mutation必须是同步函数;(4)ActionsAction类似Mutation,但是Action提交的是Mutation,而不是直接改变状态,还可以包含任何异步操作;(5)ModulesModule是由store分割成的模块,每个模块都拥有自己的state、getter、mutation、action,以及嵌套子模块(从上到下进行同样方式的分割)4、Vuex其他(1)Vuex 动态注册模块:Vuex 通常使用静态模块,这些模块在打包的时候都会打到 app.js 中,但是若有的模块过大而且不是必须立马用到的,就可以动态的注册模块到 vuex 中。在使用Vuex 某个模块的时候再进行注册:mounted () { this.$store.registerModule('myModule', MyModule)}在不使用的时候,注销该模块:beforeDestroy () { this.$store.unregisterModule('myModule')}这样实现的效果是该页面在加载时才下载模块内容,而不是刚访问网站就去下载该模块内容。(2)Vuex的项目结构Vuex不限制代码结构,但是规定了一些需要遵守的规则:应用层级的状态需要集中到单个store对象中;提交mutation是更改状态的唯一方法,且该过程是同步的;异步逻辑都应该封装到action里面。最后,Vuex的状态存储是响应式的,当Vue组件从store中读取状态时,若store中的状态发生变化,那么相应的组件也会得到高效更新。Vuex是通过全局注入store对象来实现组件之间的状态共享,如果在中大型项目中时,想要实现某个组件改变某个数据,多个组件自动获取更改后的数据来进行业务逻辑处理,这时候就要适用Vuex;如果在项目中只是多个组件间传递数据,没有其他复杂操作,适用组件间常用通信方式即可,没必要使用Vuex。以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!三掌柜的微信公众号: