Nuxt3 使用 pinia

安装

pnpm i pinia @pinia/nuxt pinia-plugin-persistedstate -S

/* 持久化*/
pnpm i pinia-plugin-persistedstate -S

插件

• nuxt.config.ts

 // 添加模块
modules: ["@pinia/nuxt", "pinia-plugin-persistedstate/nuxt"],

使用

• 新建 pinia/user.ts

import { defineStore } from "pinia";
interface State {
  activeProductName: string;
}
export const useNuxtStore = defineStore("nuxtStore", {
  state: (): State => ({
    activeProductName: "",
  }),
  actions: {
    setActiveProductName(name: string) {
      this.activeProductName = name;
    },
  },
  // 注意：persist定义要做判断，因为localStorage/sessionStorage是客户端参数，所以需要加import.meta.client
  persist: import.meta.client && {
    storage: sessionStorage,
  },
});

• 在页面中使用

<template>
  <div class="loginpage">
    login页面
    <div>{{ useNuxtStore().activeProductName }}</div>
    <div class="partdiv"></div>
    <button @click="changeClick">点击改变</button>
  </div>
</template>

<script setup lang="ts">
  import { useNuxtStore } from "~/pinia/user.ts";
  definePageMeta({
    layout: "login",
  });

  useHead({
    title: "登录页",
    meta: [{ name: "description", content: "My amazing site." }],
  });

  console.log(useRuntimeConfig());
  console.log(useAppConfig().baseUrl); // const
  // runtimeConfig = useRuntimeConfig(); // console.log(runtimetimeConfig);

  const changeClick = () => {
    useNuxtStore().setActiveProductName("王五");
  };
</script>

<style scoped lang="scss">
  .loginpage {
    color: $primary;
    .partdiv {
      width: 750px;
      height: 750px;
      background: red;
    }
  }
</style>