state为什么放在计算属性中？

来源：6-11 Vuex 整合当前应用

慕莱坞5286906

2020-10-30

老师有个疑问，教程里面是通过计算属性返回state的，也就是下面那样写的

 setup() {
    const store = useStore<GlobalDataProps>()
    const currentUser = computed(() => store.state.user)
    return {
      currentUser
    }
  }

为什么不能直接从data中返回呢？也就是下面的那样的写法？store.state是一个响应式对象，按道理只要它被修改了，引用它的视图也会改变啊？

 setup() {
    const store = useStore<GlobalDataProps>()
    return {
      currentUser: store.state.user
    }
  }

写回答

2回答

Lemon甜橙君

2021-01-11

用一个比较好理解的方法来回答，在setup钩子(替代了Vue2中beforeCreate,created钩子)中，代码只执行一次，所以如果不写在computed中的话，类比Vue2，相当于直接写在了data函数中，那么此时的store.state.user就只是相当于一个常量，后续再修改也不会发生变化

张轩

2020-10-31

同学你好虽然 store.state.user 本身是响应式对象，但是 store commit 的修改不是在这个响应式对象上面的，你可以用这段代码简单测试一下。

const testUser = store.state.user
watch(testUser, (newProps) => {
    console.log('changed', newProps)
})

所以我们尊从一个简单的原则，从 store 中取得并显示在template 中的动态变化的数据，使用 computed 进行包裹 https://vuex.vuejs.org/zh/guide/state.html#%E5%9C%A8-vue-%E7%BB%84%E4%BB%B6%E4%B8%AD%E8%8E%B7%E5%BE%97-vuex-%E7%8A%B6%E6%80%81

慕圣4449978

“ store commit 的修改不是在这个响应式对象上面的” 是啥意思 ..

2022-11-24

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

没有理解为什么要用计算属性

回答 1

怎么在.vue中获取异步数据