首页 > 开发 > JS > 正文

用vuex管理组件状态的时候,什么地方用data,method,什么地方用state,mutation,actions,有点乱了

2017-09-05 12:26:07  来源:网友分享

用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        }    }}