Vuex初始化state调用getter报‘store is undefined’错误求助

你遇到的这个问题其实很典型——在Vuex Store还没完成初始化的阶段，就尝试引用它自身的getters了。

看你的代码，你在state.messages里直接写了owner: store.getters.getRandomMember，但此时store变量还没被赋值（毕竟new Vuex.Store({...})这个构造函数还在执行中，整个对象创建完成后才会把结果赋值给store），所以这时候store自然是undefined。

另外还有两个小问题需要注意：

• Action里的this.commit写法不可靠，应该用解构出来的commit方法；
• 你的getRandomMember getter没有判断members数组是否为空，万一成员数据还没加载完成，会直接报错。

下面给你两种可行的解决方案：

方案一：初始化占位，成员加载后再赋值owner #

先给messages的owner设为占位值，等members数据通过action加载完成后，在mutation里批量给每个message赋值owner：

const store = new Vuex.Store({
  state: {
    members: [],
    member: {},
    messages: [
      {
        id: Math.floor(Math.random() * 10000),
        owner: null, // 先设为占位值
        content: "Hello this is a test message",
        date: "06.03.2020 12:20"
      },
      {
        id: Math.floor(Math.random() * 10000),
        owner: null,
        content: "Hello this is the second message",
        createdDate: "06.03.2020 12:20"
      },
      {
        id: Math.floor(Math.random() * 10000),
        owner: null,
        content: "Hello this is the third message",
        createdDate: "06.03.2020 12:40"
      }
    ]
  },
  mutations: {
    SET_MEMBERS(state, membersData) {
      state.members = membersData;
      // 成员数据加载完成后，给每个message的owner赋值
      state.messages.forEach(msg => {
        // 这里直接用state.members，避免依赖getter
        msg.owner = state.members[Math.floor(Math.random() * state.members.length)];
      });
    }
  },
  actions: {
    // 用解构获取commit，替代this.commit
    async getMembers({ commit }) {
      try {
        const membersResult = await axios.get("https://api.github.com/orgs/github/public_members");
        commit("SET_MEMBERS", membersResult.data);
      } catch (err) {
        console.error("获取成员数据失败:", err);
      }
    }
  },
  getters: {
    getRandomMember: state => {
      // 增加空数组判断，防止报错
      if (!state.members.length) return null;
      return state.members[Math.floor(Math.random() * state.members.length)];
    }
  },
  modules: {}
});
export default store;

方案二：把messages改成getter，动态生成 #

如果希望messages的owner能随时更新（比如成员列表变化后，owner也能随机切换），可以把messages改成getter，每次访问时动态生成：

const store = new Vuex.Store({
  state: {
    members: [],
    member: {},
    // 只存储message的基础模板，owner动态生成
    messageTemplates: [
      {
        id: Math.floor(Math.random() * 10000),
        content: "Hello this is a test message",
        date: "06.03.2020 12:20"
      },
      {
        id: Math.floor(Math.random() * 10000),
        content: "Hello this is the second message",
        createdDate: "06.03.2020 12:20"
      },
      {
        id: Math.floor(Math.random() * 10000),
        content: "Hello this is the third message",
        createdDate: "06.03.2020 12:40"
      }
    ]
  },
  mutations: {
    SET_MEMBERS(state, membersData) {
      state.members = membersData;
    }
  },
  actions: {
    async getMembers({ commit }) {
      try {
        const membersResult = await axios.get("https://api.github.com/orgs/github/public_members");
        commit("SET_MEMBERS", membersResult.data);
      } catch (err) {
        console.error("获取成员数据失败:", err);
      }
    }
  },
  getters: {
    getRandomMember: state => {
      if (!state.members.length) return null;
      return state.members[Math.floor(Math.random() * state.members.length)];
    },
    // 动态生成完整的messages数组
    messages: (state, getters) => {
      if (!state.members.length) return [];
      return state.messageTemplates.map(template => ({
        ...template,
        owner: getters.getRandomMember
      }));
    }
  },
  modules: {}
});
export default store;

这样修改后，不仅解决了store is undefined的问题，还优化了代码的可靠性，避免了潜在的数组越界错误。

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