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

Question

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

Answer 1

放在 store 里面就是为了方便非父子组件操作该状态,放在组件中的话如果想要改变这个状态我知道的有三种方式

• 父子组件通信

• vue 提供的 eventBus

• 当前组件自己操作

---

举个例子:

在 header 组件中需要知道是否已登录的状态,如果你将状态放在header组件中,那么你只有在当前组件里面重新获取一次状态再进行相关操作,别的组件还需要知道这个状态的话还需要在自身组件中重新做一遍重复的操作

---

放在 store 就不同了,你只需要在 store 的 state 定义一个状态值isLogin,然后在 action 里面定义一个获取登录状态的方法,获取成功之后通过mutation去改变 state 里面的isLogin的值,
那么你可以在任何一个组件中都可以去使用这个isLogin状态了