一、vuex的安装:
1、运行命令:npm install vuex --save
我Visual Studio Code装了淘宝镜像:用cnpm i vuex --sava命令提高安装速度。
2、src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新
建一个index.js:
创建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. s t o r e . c o m m i t ( ′ s h o w ′ ) 或 t h i s . store.commit('show') 或this. store.commit(show)this.store.commit(‘newNum’,6) 在别的组件里面改变showfooter的值了,mutations里面的方法都是同步事务,两个组件里用执行得到的值,每次都是一样的,所以一般在actions中改值;
actions:是个对象变量,它的方法可以包含任意异步操作,是用来异步触发mutations里面的方法,actions里自定义的函数接收context参数和要变化的形参,context与store实例具有相同的方法和属性,它可执行context.commit(’ '),而在外部组件里进行全局执行actions里面方法的时候,你只需要用执行this. s t o r e . d i s p a t c h ( ′ h i d e F o o t e r ′ ) 或 t h i s . store.dispatch('hideFooter')或this. store.dispatch(hideFooter)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在这里插入图片描述

Logo

前往低代码交流专区

更多推荐