composables 与 useState

composables

自动扫描

此目录下的所有顶层文件会被自动扫描，文件中导出的方法，在应用程序中可以被直接使用，不用再手动引入

├── composables
│   ├── useDate.js

• 使用

export const UsegetYear = () => {
  return new Date().getFullYear();
};

• 调用

<template>
  <div>{{ year }}</div>
</template>
<script setup>
  const year = UsegetYear();
</script>

嵌套扫描

├── composables
│   ├── auth
│   │   ├── useDate.js

• 使用

在 nuxt.config.ts 里面

// 嵌套寻找composables
imports: {
    dirs: [
        // 扫描顶层模块
        'composables',
        // 扫描嵌套的模块，并且使用特定的名称和后缀的文件
        'composables/*/index.{ts,js,mjs,mts}',
        // 扫描给定目录内的所有模块
        'composables/**'
    ]
},

useState

Nuxt3 提供了可组合的 useState，以创建跨组件和 SSR 友好的共享数据状态，

利用此特性也可实现全局的状态管理(客户端不是可以持久化)

不能刷新页面,只能用跳转的方式

简单使用

在单个路由中使用的时候类似于 ref 的功能

创建的值可以作为全局的唯一标识，在任何其他的路由组件中使用

<template>
  <div>
    <div>useState 里面的内容 {{ countnumber }}</div>
    <button @click="changecountnumber">+1</button>
    <button @click="gotologin">跳转到登录页</button>
  </div>
</template>
<script setup>
  const countnumber = useState("countnumber", () => 0);
  const changecountnumber = () => {
    countnumber.value++;
  };
  const Router = useRouter();
  const gotologin = () => {
    Router.push("/login");
  };
</script>

• login 页面

<template>
  <div>
    变化的值{{ countnumber }}
    <button @click="gotologin">跳转到首页</button>
  </div>
</template>
<script setup lang="ts">
  const countnumber = useState("countnumber");
  const Router = useRouter();
  const gotologin = () => {
    Router.push("/");
  };
</script>

配合 composables 使用

新建目录结构如下

├── composables
│   ├── auth
│   │   ├── useStore.js

useStore.js

export const useUserInfo = () => {
  return useState(() => {
    return {
      name: "jsopy",
      age: 18,
    };
  });
};

在页面中使用

• index.vue

<!--
 * @Author: jsopy
 * @Date: 2024-12-08 10:19:02
 * @LastEditTime: 2024-12-08 15:29:36
 * @FilePath: /demo1/pages/index.vue
 * @Description:
 *
-->
<template>
  <div>
    <div>useState 里面的内容{{ userInfo.name }}---年龄{{ userInfo.age }}</div>
    <button @click="changecountnumber">改变名称</button>
    <button @click="gotologin">跳转到登录页</button>
  </div>
</template>

<script setup lang="ts">
  const userInfo = useUserInfo();
  const changecountnumber = () => {
    userInfo.value.name = "测试中";
    userInfo.value.age = 56;
  };
  const Router = useRouter();
  const gotologin = () => {
    Router.push("/login");
  };
</script>

<style scoped lang="scss">
  div {
    color: $blue;
  }
</style>

• login.vue

<template>
  <div>
    <div>useState 里面的内容{{ userInfo.name }}---年龄{{ userInfo.age }}</div>
    <button @click="gotologin">跳转到首页</button>
  </div>
</template>

<script setup lang="ts">
  // 初始化方法
  const init = () => {
    definePageMeta({
      layout: "login",
    });
    // 局部改变
    const title = "首页测试结果";
    useHead({
      title,
      meta: [{ name: "description", content: "My amazing site." }],
    });
  };
  init();

  const userInfo = useUserInfo();
  const Router = useRouter();
  const gotologin = () => {
    Router.push("/");
  };
</script>

<style scoped></style>