时间戳

首页 > 解决方案 > 如何在脚本中使用 VUEX GETTERS

vue.js - 如何在脚本中使用 VUEX GETTERS

问题描述

我正在为一些变量使用 VUEX GETTERS。我可以在 html 部分中使用它们，但我不能在 script->data 部分中编辑或更改它们。

错误：[Vue 警告]：数据（）中的错误：“ReferenceError：未定义位置”

<script>
import {mapGetters} from 'vuex'
export default {
        data: () => ({
            dialog: false,
            TotalEntitiy:Positions[0] // GIVES ERROR
        }),       
        computed:{
            ...mapGetters({
                PageTitle:  'GETTER_CURRENT_PAGE',
                headers:   'GETTER_HEADERS',
                Positions: 'GETTER_POSITIONS',
                items:'GETTER_ITEMS'
            }),

标签： vue.jsvuex

解决方案

定义TotalEntity一个新的计算属性，而不是组件数据的一部分，因为它必须根据存储中的值进行反应：

data: () => ({
    dialog: false
}),       
computed:{
    ...mapGetters({
        PageTitle:  'GETTER_CURRENT_PAGE',
        headers:   'GETTER_HEADERS',
        Positions: 'GETTER_POSITIONS',
        items:'GETTER_ITEMS'
    }),
    TotalEntity() {
        return this.Positions[0];
    }
}

this.Positions更新：为了规避可能是nullor的潜在问题undefined，您可以使用可选的链接运算符?.：

return this.Positions?.[0];

您还可以使用nullish 合并运算符回退到默认值：

return this.Positions?.[0] ?? YOUR_FALLBACK_VALUE;

推荐阅读