如何使用 Vue3 中的设置存储语法在 Pinia 存储中使用 `useRoute`/`useRouter`？

Question

我一直在尝试让我的 Pinia 商店在 Vue 3 中启动并运行，这一切都非常轻松，直到我想访问 url 中的一些参数。

我有一家商店（简化），如下所示：

import { defineStore } from 'pinia';
import { useRoute } from 'vue-router';
import { useLocalStorage } from '@vueuse/core';

export const useUserStore = defineStore('user', () => {
  const route = useRoute();
  const uuid = ref(
    useLocalStorage('uuid', route.params.id)
  )

 return { uuid };
})

不幸的是，该路线仍然未定义，就好像useRoute()没有正确触发一样。我已经看到您可以添加插件以在初始化时将路由器实例添加到 pinia 存储中，但我无法找到this在安装存储中访问该实例的方法。

任何帮助将不胜感激

Answer 1

route当 pinia 启动时未定义。

你需要稍等一下。

一种方法是在加载组件时调用该函数。

export const useUserStore = defineStore('user', () => {
  const route = useRoute();
  const id = ref('');

  const setId = () => {
    id.value = route.params.id as string; // don't need as string if you don't use TypeScript
  };

  return { id, setId };
});

<script setup lang="ts">
import { useUserStore } from '../stores/user';
const user = useUserStore();

user.setId(); // call the function from pinia, route.params works just fine
</script>

链接演示