在前端培训开发工作中，使用Vue.js是主流技术，尤其是在项目开发过程中，只要状态涉及到Vue的管理，必然会用到Vuex。这篇博文就是分享关于Vuex的相关知识点，方便后面的参考。1.先了解一下什么是Vuex？官方文档是这样介绍的：Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也被集成到Vue官方调试工具devtoolsextension中，它提供了高级调试功能，例如零配置时间旅行调试、状态快照导入和导出等。示例如下所示：newVue({//statedata(){return{count:0}},//viewtemplate:
{{count}}
,//actionsmethods:{increment(){this.count++}}})Vuex是官方的状态管理框架由Vue推出，并有方便简单的API设计开发工具支持。数据。2、那我们来了解一下为什么要用Vuex？先了解一个知识点：Vue是单向数据流驱动的。流程图如下：（本图来源于网络，如有侵权请联系作者删除）state，驱动应用的数据源；视图，以声明方式将状态映射到视图；动作，响应用户在视图上输入引起的状态变化。以上是单向数据流概念的简单流程示意图。如果应用程序遇到多个组件共享状态，单向数据流的简单性将很容易被破坏。当多个视图依赖于同一个状态，或者来自不同视图的行为需要改变同一个状态时，使用Vuex。Vuex是一个类似于Redux的状态管理器，用于管理Vue所有组件的状态，采用集中存储的方式管理应用所有组件的状态，并使用相应的规则保证状态以可预测的方式变化.还有，在前端模块化项目中，当需要在全局范围内引用一些变量时，也可以使用Vuex来解决。3.Vuex的组成（此图来源于网络，如有侵权请联系作者删除）从上图我们可以看出Vuex由以下几部分组成：（1）StateState单体statetree，这是一个单一的状态存储，存储的是基础数据；(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.VuexOthers(1)Vuex动态注册modules：Vuex通常使用静态模块，这些模块在打包时会打到app.js中。但是如果有些模块太大，不需要立即使用，可以动态注册模块到vuex中。使用Vuex的模块时注册：mounted(){this.$store.registerModule('myModule',MyModule)}不使用时，注销模块：beforeDestroy(){this.$store.unregisterModule('myModule')}这样实现的效果是在页面加载的时候下载模块内容，而不是刚访问完网站就下载模块内容。(2)Vuex的项目结构Vuex对代码结构没有限制，只是规定了一些需要遵循的规则：应用层的状态需要集中到一个单独的store对象中；提交突变是改变状态的唯一方式，过程是同步的；异步逻辑应该封装在动作中。最后，Vuex的状态存储是响应式的。当一个Vue组件从store中读取状态时，如果store中的状态发生变化，相应的组件也会被高效地更新。Vuex通过全局注入store对象来实现组件间的状态共享。在大中型项目中，如果要实现一个组件更改某个数据，多个组件会自动获取更改后的数据进行业务逻辑处理。这时候就必须应用Vuex；如果项目中只有多个组件传递数据，没有其他复杂的操作，可以使用组件间常用的通信方式，没有必要使用Vuex。