SessionStorage不會在點擊事件中分配變數

我正在嘗試分配一個變數，sessionStorage如下所示：

<router-link :to="{name: 'admin'}" @click="sessionStorage.auth = false">

但它會拋出這個警告：

[Vue warn]: Unhandled error during execution of native event handler 
  at <RouterLink to= {name: 'admin'} onClick=fn > 
  at <HeaderCms key=1 > 
  at <Cms>
warn @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25050
logError @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25224
handleError @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25216
callWithErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25170
callWithAsyncErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25176
callWithAsyncErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25186
invoker @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33228
app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:38657 

其次是這個錯誤：

Uncaught TypeError: Cannot set properties of undefined (setting 'auth')
        at onClick._cache.<computed>._cache.<computed> (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:38657:39)
        at app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33242:60
        at callWithErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25167:22)
        at callWithAsyncErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25176:21)
        at callWithAsyncErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25186:21)
        at HTMLAnchorElement.invoker (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33228:90)

分配時如何未定義屬性false？我究竟做錯了什么？

uj5u.com熱心網友回復：

我嘗試了我能想到的所有變體，唯一對我有用的解決方案是同時使用修飾符和native方法處理程式：

<template>
  <router-link :to="{ name: 'admin' }" @click.native="onClick" />
</template>

<script>
export default {
  methods: {
    onClick() {
      sessionStorage.setItem('auth', false);
    },
  },
};
</script>

此處native描述了修飾符的原因。我不完全確定為什么需要方法處理程式，但正如您在原始錯誤中看到的那樣，在您的行內處理程式中未定義。sessionStorage

注意sessionStorage API使用而setItem不是賦值。

uj5u.com熱心網友回復：

您需要在 的事件上使用.native修飾符，因此請嘗試：@clickrouter-link

<router-link :to="{name: 'admin'}" @click.native="sessionStorage.setItem('auth', false)">

uj5u.com熱心網友回復：

正如你可以在這個問題 "@click.native" is deprecated in Vue.js 3的評論中找到的那樣。所以我建議使用按鈕而不是router-link像下面的代碼那樣以編程方式導航：

<script>
import { RouterLink, RouterView, useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter()
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", false);
      router.push("/admin");
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>
 
      <nav>
<!--        <RouterLink to="/admin">-->
          <button @click="navigate">Admin</button>
<!--        </RouterLink>-->
      </nav>

  <RouterView />
</template>

請注意，我使用了useRouter因為在組合 APIthis中不可訪問。然后，您可以設定與應用中其他鏈接類似的按鈕樣式。

從這個答案的評論中，我發現我們也可以通過其他兩種方式做到這一點：

使用<a>標簽以獲得更好的可訪問性：

<script>
import { RouterLink, RouterView, useRouter } from 'vue-router';
import {ref} from "vue";
export default {
  setup() {
    const router = useRouter()
    const trueFalse = ref(false)
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", trueFalse.value);
      router.push("/admin");
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/videos">videos</RouterLink>
          <a @click="navigate">Admin</a>
      </nav>

  <RouterView />
</template>

并使用<router-link>：

<script>
import { RouterLink, RouterView } from 'vue-router';
import {ref} from "vue";
export default {
  setup() {
    const trueFalse = ref(false)
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", trueFalse.value);
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>
 
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/videos">videos</RouterLink>
        <RouterLink to="/admin" @click="navigate">
          Admin
        </RouterLink>
      </nav>

  <RouterView />
</template>

標籤：Vue.js 本地存储 Vuejs3 会话存储

上一篇：ref，vue2中的計算備選方案

下一篇：設定固定大小并禁用調整大小、tkinter最大化視窗和恢復視窗