为什么我的计算方法同时运行服务器端和客户端？

Question

我正在使用 Nuxt 和 Vue.js 制作一个通用应用程序，我注意到我的按钮有一些奇怪的行为，它在页面加载后更改了类，并且由于它有一个转换，所以它变得非常烦人。

我使用计算方法设置按钮的类。所以我尝试在计算方法中放置一个console.log，然后我看到它同时调用了服务器端和客户端？这怎么可能？我需要做些什么才能使该方法仅在服务器端调用吗？

<template>
    <a :href="link" :class="themeClass">
        <slot />
    </a>
</template>

<script>
export default {
    props: { 
        link:{
            type:String,
            default: '',
        },
        theme:
        {
            type:String,
            default: 'primary',
            validator: (value) => ['secondary', 'tertiary'].includes(value),
        },
        inverted:{
            type:Boolean,
            default: false,
        },
    },
    computed:{
        themeClass: function()
        {
            console.log("set style");
            let invertedStyle = this.inverted ? '-inverted' : '';
            return 'butt ' + this.theme + invertedStyle;
        }
    }
}
</script>

<style lang="scss" scoped>
.butt{
    box-sizing: border-box;  
    cursor: pointer;
    display: block;
    text-align: center;
    width: 170px;
    height: 40px;
    line-height: 40px;
    transition: 0.2s;
}

.primary{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.primary:hover{
    border: 2px solid $primary-color;
    @include alphaBackground();
}

.primary-inverted{
    border: 2px solid $primary-color;
    color: $primary-color;
    @include alphaBackground();
}

.primary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.secondary{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.secondary:hover{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.tertiary{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}

.tertiary:hover{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}
</style>

Answer 1

我从 Nuxt discord 得到以下答案

computed: {
  something() {
    return !process.client ? 'runs on server' : ''
  }
}