Question

我的user状态变量是一个具有几个属性的对象，例如first_name。我想在组件模板中显示其中一些属性。

我将状态变量分配给在模板中使用的计算属性：

<template>
  <div>
    {{ user.first_name }}
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      user: state => state.dashboard.user
    })
  },
  beforeMount () {
    this.$store.dispatch("dashboard/getUser");
  }
};
</script>

尽管可以，但在控制台中出现以下错误：

渲染错误：“ TypeError：无法读取null的属性'title'”

我想是因为user在安装组件时一瞬间为空，直到它收到Vue正确显示在模板中的信息为止。但是如何避免错误？

[编辑]这是商店的相关部分：

state: {
  user: null
},
...
actions: {
  async getUser({ commit }) {
    let user = await axios.get(`user`).catch(console.error);
    commit("SET_USER", user);
    return user;
  }
},

Answer 1

在映射的吸气剂中，您可以默认为空对象，如

state => state.dashboard.user || {}

那样，像user.first_name这样的事物将是undefined，而不是试图在值null上寻找属性

Answer 2

好的。我已经重写了代码。

store.js

state: {
  user: ''
},
mutations: {
  SET_USER: (state, user) => {
    state.user = user
  }
},
actions: {
  getUser: (context, user) => {
    axios.get('url/to/server')
         .then(res => {
            context.commit('SET_USER', res.data)
         })
         .catch(error => {
            console.log(error)
         })
  }
}

现在在您的根组件中（例如App.vue）

import {mapActions} from 'vuex'
export default{
  ...
  mounted() {
    this.getUser()
  },
  methods: {
    ...mapActions(['getUser'])
  }
}

您希望在组件中使用用户数据

<template>
  <div>
    {{user.first_name}}
  </div>
<template/>

import {mapState} from 'vuex'
export default{
  computed: {
    ...mapState(['user'])
  }
}

这将起作用。希望对您有所帮助。

状态变量在模板中显示时会触发错误，因为在安装组件时临时为null

2 个答案: