Vuex的简单理解跟使用

①Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

状态管理:简单的理解就是统一管理和维护各个vue组件的可变化状态

我们明白vue是单向数据流,那么它的状态管理一般包含如下几部分:

1.state:驱动应用的数据(一般指data中返回的数据)

2.view:一般指模板,以声明的方式将state的数据映射到视图

3.actions:相应在view上的用户输入导致的状态变化

但是当我们的应用遇到多个组件共享状态时候，那么单向数据流可能不太满足我们的需求：

比如如下几个方面：

1. 多个视图依赖于同一状态。

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

2. 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此我们可以把组件的共享状态提取出来，作为全局来管理，因此vuex产生了

解决了非父子组件的消息传递(将数据存放在state中)

减少了AJAX请求次数,有些情景可以直接从内存中的state中获取

最主要解决了组件之间共享同一状态的问题。可以把组件的共享状态提取出来，作为全局来管理。

缺点也显而易见:刷新浏览器,vuex中的state会重新变为初始状态

想要解决vuex的缺点也非常简单,如下

1:首先通过cnpm下载vuex-persist到项目中

2:在创建好的仓库中引入插件

3.创建并保存在本地

4.在新建的仓库中还要加一步,否则运行不了

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

state：存储状态（变量）

getters：对数据获取之前的再次编译，可以理解为state 的计算属性。我们在组件中使用$sotre.getters.fun()

mutations ：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。

actions：异步操作。在组件中使用是$store.dispatch('')

modules：store 的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。

弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。

需要注意的是有命名空间的vuex没法再用普通的方法访问到(如commit),只能用辅助函数

上面我们提到了vuex里的辅助函数,在使用vuex的时候，仅仅了解State、Getter、Mutation、Action、Module等概念，在使用过程中，业务功能逐渐增加，会出现很多个状态。当一个组件需要多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

引入:

三种用法:

mapGetters将store中的getter映射到局部计算属性

mapMutations:使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

mapAction:使用mapActions辅助函数将组件的methods映射成store.dispatch调用

以上就是我对vuex的理解和一些简单的使用分享,第一次写简书,如有不对请指出