vue3+ts使用vueCookies进行cookies的存取

在Vue 3和TypeScript中使用vue-cookies进行Cookies的存取，首先需要安装vue-cookies-next库，因为vue-cookies已经停止维护。

npm install vue-cookies-next

然后在Vue应用中进行配置：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies-next'
 
const app = createApp(App)
 
app.use(VueCookies)
 
app.mount('#app')

在组件中使用：

<template>
  <div>
    <button @click="setCookie">Set Cookie</button>
    <button @click="getCookie">Get Cookie</button>
  </div>
</template>
 
<script lang="ts">
import { Vue, Options } from 'vue-class-component'
 
@Options({})
export default class CookieExample extends Vue {
  // 设置Cookie
  setCookie(): void {
    this.$cookies.set('my-cookie-name', 'my-cookie-value', '1D') // 有效期为1天
  }
 
  // 获取Cookie
  getCookie(): void {
    const cookieValue = this.$cookies.get('my-cookie-name')
    alert(`Cookie value is: ${cookieValue}`)
  }
}
</script>

在上面的例子中，我们定义了一个Vue组件，它有两个按钮，一个用于设置名为'my-cookie-name'的Cookie，另一个用于获取并弹窗显示该Cookie的值。设置Cookie时，我们指定了Cookie的值和有效期（例如，'1D'代表1天）。