Javascript Vuex Getter未定义

我是Vue.js新手，遇到Vuex模块和Axios的问题。我有一个“post”组件，它从路由器中检索slug，并使用Axios获取数据，然后使用Vuex Getters检索数据

我能够成功检索数据，但在我的DevTools上仍然看到此错误，“TypeError:无法读取未定义的属性'name'”

由于此错误，我无法将

this.post.name

传递给Vue Meta

代码

Post.vue

  computed: {
    ...mapGetters(["post"]),
  },

  mounted() {
    const slug = this.$route.params.slug;
    this.fetchPost({ slug: slug });
  },

  methods: {
    ...mapActions(["fetchPost"]),

/store/modules/post.js

const state = {
  post: [],
};

const getters = {
  post: (state) => {
    return post;
  }
};

const actions = {
  async fetchPost({ commit }, arg) {
    try {
      await axios.get("/post/" + arg.slug).then((response) => {
        commit("setPost", response.data);
      });
    } catch (error) {
      console.log(error);
    }
  },
};

const mutations = {
  setPost: (state, post) => (state.post = post),
};

export default {
  state,
  getters,
  actions,
  mutations,
};

---

您的getter是完全错误的：状态getter应该是一个函数，它将整个

状态

作为参数，并从中检索您感兴趣的内容。你的版本

const getters = {
  post: (state) => {
   return post;
  }
};

…将

状态

作为参数，但不使用它。相反，它返回一个未在该上下文中定义的变量（

post

） 它将始终返回未定义的

，而不管

状态的当前值。post

而且，正如您已经知道的，JavaScript无法访问

未定义的
的属性
'name'

要获取state.post的当前值，请使用：

const getters = {
  post: state => state.post
}

或

。。。如果你喜欢括号

此外，出于原则，我建议使用空对象
{}
来初始化您的帖子，而不是使用空数组
[]
。
尽可能少地更改变量类型是一个非常好的编码习惯，从长远来看，这会带来巨大的好处


编辑（在[mcve]之后）

你有一个更大的问题：从axios插件导入会返回
未定义的
。因此，您不能调用
get
。因为您将该调用包装到一个
try/catch
块中，所以您看不到错误，但从未调用过端点。

我不知道你是从哪里挑选插件语法的，但它显然不是导出axios。将导入替换为
从“axios”导入axios
可以正常工作

另一个建议是
namespace
存储模块。当你有多个模块，并且你想在一个特定模块上具体引用一个特定的突变/动作时，这将变得非常有用。此时，您需要稍微更改
mapActions
和
mapGetters

看到它在工作。
@0x0，是时候创建一个。使用codesandbox.io或类似工具。请看一下这里：第一次使用codesandbox，请原谅我的无知。如果您需要任何进一步的信息，请告诉我。谢谢，我可以让它工作。真正的错误来自完全不同的插件。我将此标记为正确答案，因为它使我发现了问题。感谢您对我耐心：）无论状态值如何，getter return
未定义
对我来说都是一个实实在在的错误。很高兴我能帮上忙。快乐编码！
const getters = {
  post: (state) => { return state.post; }
}