vue状态管理vuex详细讲解

一. vuex从何由来

vuex是专门为vue框架而设计的一个公共数据管理框架，任何组件都可以通过状态管理仓库数据沟通，也可以统一从仓库中获取数据，尤其在比较大型的应用中，数据交互庞大的情况下，推荐使用vuex。

二. vuex组成

vuex有五个核心概念，分别为state,getters,actions,mutations,modules,如图所示，截图是自己写过的项目，关注重点标注即可。

之后我们需要在main.js中进行导入，截图在这里没有粘上来，优快云卡住了，为了不浪费时间就不放图啦。import store from ‘./store’
注意上述所有截图均属于vue项目目录结构。vue yyds !

三. 核心模块具体内容

1. modules

store-modules文件夹用来存放模块js文件，也就是每个模块我们会有一个vue文件会和一个js文件。

2. actions

actions 用来放一些异步请求，这里千万注意要return res，至于请求的写法，大家习惯不一样，我比较习惯这样写，可以参考。
而actions内写的请求，我们需要在对应的vue 界面中进行状态引入，以及actions引入。具体原理如下图所注。这里千万注意改变state中的数据只有mutations可以做到

3. getters

store - getters.js

4.vuex中的辅助函数

mapState、mapActions辅助函数

我们在状态管理机中存储的数据如何在页面中使用，可以借助这两个辅助函数，这里我们以一个为例进行说明。

那么我们在vue界面中应该就可以使用在状态管理机中存储的方法及数据里，这里要注意一定要让方法执行，this.XXX()