javascript - 用vuex管理组件状态的时候,什么地方用data,method,什么地方用state,mutation,actions,有点乱了
本文介绍了javascript - 用vuex管理组件状态的时候,什么地方用data,method,什么地方用state,mutation,actions,有点乱了的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
用vuex管理组件状态的时候,什么地方用data,method,什么地方用state,mutation,actions,有点乱了
解决方案
vuex 其实,通俗点理解就是个全局命名空间。也就是个全局变量。那么挂到vuex 里面的action,state 也就是全局都可用。
一般我们在写组件的时候(其实是业务组件,功能组件很少用vuex),搞清楚当前业务组件有方法或者数据需要传递到其TA组件去吗?
举个例子:
有这么一个场景。假定 有个管理系统,有公共的登陆模块、登陆后跳转的业务模块。
那么登陆模块的定义就会是这样的。
// 登陆模块
const state = {
user: { } // 存储用户信息
}
const action = {
login() { ... } // 调用API登陆
}
const mutation = {
setLogin(state, user){
state.user = user
}
}
这样定义,login(),user 可以在任何想要调用的地方调用。
如果是这类方法,我们就应该定义到vuex 里面。
反之,如果你的属性只是为了在当前组件内部用,例如:
<div v-if="isShow">
show...
</div>
<button @click="toggle">切换</button>
export default{
data(){
return { isShow: false }
},
method: {
toggle(){
this.isShow = !this.isShow
}
}
}
这篇关于javascript - 用vuex管理组件状态的时候,什么地方用data,method,什么地方用state,mutation,actions,有点乱了的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文