Vuex Getter 未定义

Posted 2023-02-23

【中文标题】Vuex Getter 未定义

【英文标题】：Vuex Getter Undefined

【发布时间】：2020-10-05 10:54:39

【问题描述】：

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

我能够成功检索数据，但我仍然在我的 DevTools 上看到此错误，“TypeError: Cannot read property 'name' of undefined”

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

【参考方案1】：

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

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

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

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

const getters = 
  post: state => state.post

或者

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

...如果你喜欢括号。

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

---

编辑（在 [mcve] 之后）

你有一个更大的问题：从你的 axios 插件导入返回 undefined。所以你不能打电话给get。因为您将该调用包装到 try/catch 块中，所以您看不到错误，但永远不会调用端点。 我不知道您从哪里选择了该插件语法，但它显然没有导出 axios。将导入替换为 import axios from 'axios' 可以正常工作。

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

看到它工作here。

【讨论】：

@0x0，是时候创建一个minimal reproducible example了。使用 codesandbox.io 或类似的。

你能看看这里吗：codesandbox.io/s/wonderful-sid-rw927

第一次使用Codesandbox，请原谅我的无知。如果您需要任何进一步的信息，请告诉我。

无论状态值如何，让 getter 返回 undefined 对我来说都是一个足够真实的错误。很高兴我能帮上忙。编码愉快！