为什么这个 vuex 计算的 getter 没有反应？答案

【问题标题】：why is this vuex computed getter not reactive?为什么这个 vuex 计算的 getter 没有反应？
【发布时间】：2021-10-20 14:34:58
【问题描述】：

<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

【问题讨论】：

你怎么称呼createStore？
@PalashBansal 添加
您需要将 getter 和 state 传递给 createStore，您这样做了吗？
@PalashBansal 是的，我在示例中添加了返回码

标签： vuex vuejs3

【解决方案1】：

您不能使用store.getters 访问模块吸气剂，因为那是根吸气剂。相反，请尝试以类似于调用 dispatch 的方式进行操作：

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

有关详细信息，请参阅模块官方文档中命名空间示例中的 cmets：https://next.vuex.vuejs.org/guide/modules.html#namespacing

【讨论】：