javascript - Vuex Getter 未定义

Question

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

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

由于此错误，我无法将 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,
};

Answer 1

你的 getter 是完全错误的:状态 getter 应该是一个函数，它将整个 state 作为参数并从中检索你感兴趣的任何内容。您的版本...

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

...将 state 作为参数，但不使用它。相反，它返回一个尚未在该上下文中定义的变量 (post)。
无论 state.post 的当前值如何，它都将始终返回 undefined。
而且，正如您所知，JavaScript 无法访问 undefined 的属性 'name'。

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

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

或者

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

...如果您喜欢括号。

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

---

编辑([mcve]之后)

你有一个更大的问题:从 axios 插件导入返回 undefined。所以你不能对其调用 get 。由于您将该调用包装到 try/catch block 中，因此您不会看到错误，但永远不会调用端点。
我不知道您从哪里选择了该插件语法，但它显然没有导出 axios。使用 import axios from 'axios' 替换导入可以按预期工作。

另一个建议是为您的商店模块命名空间。当您拥有多个模块并且您想要专门引用特定模块上的特定突变/操作时，这将变得有用。此时您需要稍微更改 mapActions 和 mapGetters。

查看它的工作情况 here .