vue中data函数中的苏醒和state有什么区别

Question

一般我们写组件有data函数
exportdefault(){
...
data(){
return{
count:0
}
}
}
与我定义的state有什么区别
conststore=newVuex.store({
state:{
count:3
}
})
有什么区别

Answer 1

放在store里面就是为了方便非父子组件操作该状态,放在组件中的话如果想要改变这个状态我知道的有三种方式父子组件通信vue提供的eventBus当前组件自己操作举个例子:在header组件中需要知道是否已登录的状态,如果你将状态放在header组件中,那么你只有在当前组件里面重新获取一次状态再进行相关操作,别的组件还需要知道这个状态的话还需要在自身组件中重新做一遍重复的操作放在store就不同了,你只需要在store的state定义一个状态值isLogin,然后在action里面定义一个获取登录状态的方法,获取成功之后通过mutation去改变state里面的isLogin的值,那么你可以在任何一个组件中都可以去使用这个isLogin状态了以上,希望能帮助到你

Answer 2

data里面的如果你要用的话一般都是自身组件你当然也可以传给父组件或者子组件但是如果很多都用到的话会很麻烦vuex就是解决组件之间传值更方便在哪个组件都能直接取到不用一层一层传了