vue的vuex

1.公司最近开发都是用vue框架和element ui来实现的,看了公司项目源码使用了vuex,但是我进去一看,没有管理数据状态,但是还是引入了vuex, 好吧,项目比较小,前人写的!肯定未来项目大的话会使用vuex,所以提前学习一下,分享下学习心得,如果不对,请指正!

a:首先还是创建vue项目之类的吧,首先创建好,然后由父组件和子组件做成的简单页面,给大家看一下!

父组件:father.vue  子组件children.vue




如果show这个参数值在很多很多组件中需要,那么传递的组件就要用props[]传递参数,而且子组件不能修改父组件内容,这样就会造成大量的工作,所以解决这个问题,使用vuex来就会很方便的

vuex 使用:

1.安装vuex 

npm install vuex --save

2.找到main.js



响应的父子组件肯定也要修改了


这个就可以取到state的值了


这只是个简单的例子了,在实际vue项目中也肯定不是这样写的,我截取了项目的vuex目录


接下来还是讲讲一下mutations,actions.getters在vuex中扮演的角色吧!

b:  按照上面的vuex截图,先新建几个文件和vuex目录了

首先去掉mian.js中的store之类的,然后在main.js中引入刚新建的vuex中的store.js文件,如下图


接下来store.js文件如下来管理状态


show的状态值可以通过父子组件的方法$store.state.show在很多其他组件中引用这个状态值,


c: mutations

state.show = true值如果要修改为false来执行某些操作,那么就要在很多组件中去写改变值的方法,例如 父组件中的

v-on:click="$store.state.show = true"

但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那使用起来就会很麻烦了 !

所以我们可以把这个方法写在mutations中

例如这样写

// 应用初始状态
const state = {
show:false,
count:2,
}


// 定义所需的 mutations
const mutations = {
    changeShow(state){
state.show=!state.show
    },
    INCREMENT(state) {
        state.count++
    },
    DECREMENT(state) {
        state.count--
    }
}


mutations中定义了三个方法,这里面定义的方法是同步执行的(记住),官方不推荐异步方法写在里面

方法定义好了,要怎样调用呢?  在组件中使用  $store.commit('changeShow'),就可以使用mutations的 changeShow方法了!

like this


d. actions  既然mutations是执行同步,那么异步的就应该写在actions中了

  我们把mutations中的changeShow方法去掉,然后写在actions里面


在父组件中调用的时候就用 

$store.dispatch('changeShow') 

同样可以实现这个方法操作,

actions里面也可以调用mutations里面的方法:


组件里调用这个方法还是一样,用$store.dispatch('changeShow') 

mutations使用$store.commit()触发方法  同步操作

actions使用$store.dispatch()触发方法   异步操作


e: getters 是用来计算state然后生成新的数据状态

定义一个getters,里面写了个getShow方法,返回state


在父组件中调用使用



每次点击时都会改变state的值 



还有mapState、mapGetters、mapActions 不过我也不是很懂,只是获取状态的一种简单方式,等我自己了解熟练了再说吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值