vuex的使用方法

一、vuex的安装：
1、运行命令：npm install vuex --save
我Visual Studio Code装了淘宝镜像：用cnpm i vuex --sava命令提高安装速度。
2、src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新
建一个index.js：

3、在 main.js里面引入store，然后全局注入一下，这样就可以在任何一个组件里面使用this.$store了：

4、我们先声明一个state变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的Vuex.Store里面传入一个空对象，并把刚声明的变量state仍里面：

然后我们可以用this.$store.state.showFooter在任何一个组件里面获取showfooter定义的值了。

5、getters：和vue计算属性computed一样，实时监听state值的变化(最新状态)；
mutattions：是一个对象，这个对象里面可以放改变state的初始值的方法，用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变，你可用 this.$store.commit{(}^{\prime }sho{w}^{\prime })或this.$store.commit(‘newNum’,6) 在别的组件里面改变showfooter的值了，mutations里面的方法都是同步事务，两个组件里用执行得到的值，每次都是一样的，所以一般在actions中改值；
actions：是个对象变量，它的方法可以包含任意异步操作，是用来异步触发mutations里面的方法，actions里自定义的函数接收context参数和要变化的形参，context与store实例具有相同的方法和属性，它可执行context.commit(’ ')，而在外部组件里进行全局执行actions里面方法的时候，你只需要用执行this.$store.dispatch{(}^{\prime }hideFoote{r}^{\prime })或this.$store.dispatch(‘getNewNum’，6) //6要变化的实参。
二、vuex模块化使用：
1、在store中添加：

而对应的store文件夹下面的index.js 里面的内容就直接改写成：

2、然后在页面上script里我们需要先导入：

  import {mapState,mapGetters,mapActions} from 'vuex';

3、mapState里面是放state里面所有的属性；mapGetters来获取getters.js里的数据；mapActions接受action里面的函数来接受数据也可以传参。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190814154021648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4=,size_16,color_FFFFFF,t_70