vue.js - 如何在 vuex 中显示 store 中的值

Question

我将数据存储在 Vuex 商店中。这里的样子：

基本上，我想在视图中显示 first_name 。所以我返回了这样的数据：

data () {
        return {
            first_name: this.$store.state.user.attributes.first_name,
        }
    },

Ans 很容易想在 div 中显示它：

<div>{{first_name}}</div>

但我得到vue.esm.js:1906 TypeError: Cannot read properties of undefined (reading 'first_name')

score 0 · Accepted Answer

为此，您需要一个计算属性。

因此，不要将变量first_name放在您的中data，而是将其设置为计算属性，如下所示：

computed: { first_name() { return this.$store.state.user.attributes.first_name } }

1 回答 1