为什么Vue3中computed绑定Vuex命名空间模块的getter无响应性

你遇到的问题核心是Vuex命名空间模块的getter访问规则错误，和getter本身是函数没有关系。

具体错误点 #

你在playlists模块配置中开启了namespaced: true，该配置会让模块内所有getters、actions、mutations自动带上模块名前缀，避免命名冲突，因此你不能直接通过store.getters.allPlaylists访问模块内的getter。

修复方案 #

将组件内的getter访问写法调整为带命名空间的格式即可：

const playlists = computed(() => store.getters['playlists/allPlaylists']);

额外说明：按你给出的store结构，playlists是注册在根store下的子模块，正常访问模块state的写法应该是store.state.playlists.all，你提到直接写store.state.all就能正常工作大概率是笔误，实际运行中该写法是取不到playlists模块下的all属性的。

如果只是简单读取原始state值，确实可以直接访问state，getters的核心价值体现在以下场景：

• 抽离公共的派生状态计算逻辑：比如需要对state做过滤、格式化、聚合等操作时，把逻辑写在getters里可以实现全应用复用，不需要每个组件都重复写相同的计算逻辑
• 自动响应式缓存：getters的执行结果会根据依赖的state做缓存，只有依赖的state发生变化时才会重新计算，多次访问相同getter不会重复执行逻辑，性能优于在组件内单独写computed做相同计算
• 支持传参的动态计算：可以返回函数的getter实现动态传参查询，比如getPlaylistById: (state) => (id) => state.all.find(item => item.id === id)，调用时直接store.getters['playlists/getPlaylistById'](123)即可，非常灵活

内容的提问来源于stack exchange，提问作者John Smith