Vue3项目中vue-cookies的$cookies.set代码应放置于何处？

你已经通过app.use()完成了vue-cookies的全局注册，$cookies.set()的放置位置完全取决于你的业务需求，以下是几种最常见的使用场景：

1. 组件内部（交互触发/页面初始化） #

这是最常用的场景，比如用户完成登录操作后存token、页面加载时存用户偏好设置等。

Composition API（setup语法） #

在setup中需要通过getCurrentInstance获取全局注册的$cookies：

import { getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    // 示例1：页面挂载完成后设置cookie
    onMounted(() => {
      proxy.$cookies.set('user_preference', 'dark_mode', '7d');
    });

    // 示例2：按钮点击事件触发设置
    const handleLogin = () => {
      // 假设登录接口返回token
      const token = 'xxx-xxx-xxx';
      proxy.$cookies.set('auth_token', token, '1d');
    };

    return { handleLogin };
  }
};

Options API #

直接通过this.$cookies调用即可：

export default {
  mounted() {
    // 页面初始化时设置
    this.$cookies.set('site_lang', 'zh-CN', '30d');
  },
  methods: {
    handleLogout() {
      // 操作触发时设置
      this.$cookies.set('last_logout_time', Date.now(), '1d');
    }
  }
};

2. 路由守卫中 #

如果需要在路由跳转前后设置cookie（比如记录用户访问路径），可以放在路由守卫里：

// router/index.js
import { createRouter } from 'vue-router';
import app from '../main';

const router = createRouter({
  // 路由配置
});

router.beforeEach((to, from, next) => {
  // 记录用户上一次访问的页面
  app.config.globalProperties.$cookies.set('last_visited_page', from.path, '1d');
  next();
});

export default router;

3. 全局初始化逻辑（main.js/index.js） #

如果需要在应用启动时就设置一些全局cookie（比如默认的站点配置），可以在app.use(vueCookies)之后直接调用：

// main.js/index.js
import { createApp } from 'vue';
import vueCookies from 'vue-cookies';
import App from './App.vue';

const app = createApp(App);
app.use(vueCookies);

// 应用启动时设置全局cookie
app.config.globalProperties.$cookies.set('site_version', 'v1.0.0', '365d');

app.mount('#app');

简单来说：需要什么时候设置cookie，就把$cookies.set()放在对应的触发逻辑里——交互事件触发就放事件处理函数，页面加载就放生命周期钩子，路由跳转就放路由守卫。

内容的提问来源于stack exchange，提问作者Wadkan