为什么这个vuex计算的getter不响应?

Question

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
setup() {
const store = useStore();
const playlists = computed(() => store.getters.allPlaylists);
...
store.dispatch("playlists/getAllPlaylists");

// modules/playlists
const state = () => ({
all: [],
})
// getters
const getters = {
allPlaylists: (state) => state.all,
...
const actions = {
getAllPlaylists: ({ commit }) => { // api calls performing setPlaylists mutation
commit('setPlaylists', playlists)
...
const mutations = {
setPlaylists: (state, playlists) => {
state.all = playlists;
},
...
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

组件中的playlists为空。如果我用const playlists = computed(() => store.state.all);代替它工作，我做错了什么吗?

是因为getter是一个函数?如果我用store.state.all代替，getter有什么用?

添加存储:

import { createStore, createLogger } from 'vuex'
import mediafiles from './modules/mediafiles'
import playlists from './modules/playlists'
const debug = import.meta.env.DEV
const store = createStore({
modules: {
mediafiles,
playlists
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
export default store

Answer 1

您不能使用store.getters访问模块getter，因为那是根getter。相反，请尝试类似于调用dispatch的方式:

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

详细信息请参见模块官方文档中命名空间示例中的注释:https://next.vuex.vuejs.org/guide/modules.html#namespacing