VueX的使用

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

1.安装

这里我推荐用vue ui安装，里面的文件会自动生成一个叫store文件，里面有个index.js文件

2.使用

2.1初始化store下index.js里面的内容

 2.2在main.js中引入store

 这里我推荐vue ui的方式安装就是因为这两步vue ui会自动帮我们建立文件夹，初始化内容，引入挂载，不需要我们手动去写。

3.介绍

store的index.js中有五位成员分别是

state：存放数据
mutation：用于改变state中 存放的数据，相当于页面中的methods同步的方法
getters：用于计算过滤数据，相当于页面中的computed
actions：相当于页面中的methods 异步的方法，请求数据，但一般情况不会用actions来改变state中的数据，也不能改变，它可以通过上下文环境context来操作mutation gertter state
modules:主要用于但store中内容较多时进行分模块的

还有四个辅助函数分别是：mapState,mapMutation,mapGetters,mapActions

4.操作

4.1如图所示state肯定是用来存放数据的，然后我们可以在HomeView页面中获取它

 

 

 4.2 mutation是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutation有两个默认的形参（state,payload）,第一个是必选的，第二个不是必选的

4.2.1现在我们想实现页面上点击，数量加1的效果，就可以这么做：

 

 

 4.2.2上面的方法是传了一个必选的state形参，下面我们传两个参数试试

现在我们想实现利用传参操作state里的count累加，有两个按钮，分别是+5和+10累加

 

 4.2.3传复杂数据的使用

我们在state中添加一个复杂数据

 然后在页面中先把state中所有的复杂数据渲染到页面，然后我们可以在data数据中添加一个复杂数据，再利用传复杂数据实现点击添加新数据的功能

 实现效果如图

 4.3 getters用于计算过滤数据，相当于页面中的computed

activeList和unactiveList分别过滤true和false的结果

selecList是在原来的结果中再过滤一次，形成两次筛选得出的结果

getId是过滤指定id元素的结果

注意： 上下方法要对应。

4.4 actions可以操作state、mutations、getters

4.4.1首先我们不传参使用actions方法，先在mounted生命周期打印一下context是什么

 

可以看到context代表的是上下文环境，可以调用里面的东西

 

然后我们用actions方法操作add2

 现在我们在调用一下state里面的count就可以在页面上看到count++的效果了

 4.4.2 用actions方法传参

 首先我们传个参数n

 然后在生命周期中也传个值为10

 然后用actions方法操作add

 最后还是调用在页面中渲染就能看到每一秒+10的效果了

 4.4.3 借用辅助函数mapActions来传参

第一步先引入mapAcctions

 还是一样，我们用actions来操作add

 然后在页面的生命周期里面调用AsyncInc并传一个值10

在methods方法里解构

 最后在页面渲染就好了，和上面不使用辅助函数传参的效果是一样的。