为什么这个 vuex computed 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，那么 getters 有什么用？

添加的商店：

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

为什么这个 vuex computed getter 不是反应式的？

why is this vuex computed getter not reactive?

vuex

vuejs3