标签：vue state mutation 组件 vuex store

1.vuex是什么

vuex是vue.js的一种状态管理的模式，它通过全局注入store对象，来实现组件间的数据共享。适用于复杂的数据处理，如深层级组件的通信。

2.vuex的五个属性：

state，mutation，action，getter，module

state:（相当于vue中的data） this.$store.state，响应式数据，数据变化，组件同步更新。

getter：（相当于vue中的computed）this.$store.getter,,store的计算属性。

mutation：（相当于vue中的methods）,this.$store.commit('')，主要用来操作state数据。

action:与mutation类似，this.$store.dispach('')  包含异步操作，可以提交mutation，而不是直接更改state。

module：将store分割成模块，每个模块拥有自己的 state、mutation、action、getter,甚至是嵌套子模块

3.vuex数据传递流程：

当组件要进行数据修改的时候，通过dispach触发action里的方法，action里每个方法都有一个commit方法，通过commit来触发mutation里的方法，mutation里每个函数都有一个state参数，就可以在mutation修改state数据，state里数据是响应式的，就可以传递给页面，进行同步更新。当state里的数据需要经过计算时，可以使用getter属性，获取计算值。

4.优势：

vuex是要遵循一定的规则，把需要共享的数据抽取出来，在store里可以直接追踪 状态的变化过程，易于调试和管理。

减少ajax请求数，有些数据可以直接从内存中的state获取。

5、缺点：

刷新浏览器，state会变为初始状态。

解决方法：配合webStorage或者cookie这样的本地存储手段。

用localstorage来存储需要持久化的数据，启动vuex的时候直接从localStorage获取持久化的数据。

6.vue-bus和vuex：

bus是一个公共的vue实例，用来专门处理emit和on事件。

对于一些最父级上的提示遮罩，加载弹层比较适合，因为最父级不会被销毁，eventBus不会被重复地绑定和解绑。

问题：bus事件被多次触发。页面路由的时候，原有页面中的bus事件并没有被注销，依然隐藏在程序中。所以要在组件的beforeDestory钩子中注销。

vuex使用store对象来来做全局数据处理，制定了处理的原则和方法，统一管理。适合数据量大且复杂的项目。

对于深层级组件的通信，由于组件会被经常销毁和重建，就需要不断地建立和移除eventBus，会增大性能的开销，这时比较适合vuex。

标签：vue,state,mutation,组件,vuex,store
来源： https://www.cnblogs.com/annie211/p/12661848.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。