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 不过我也不是很懂,只是获取状态的一种简单方式,等我自己了解熟练了再说吧!