pinia 模块化

在复杂项目中，不可能把所有数据都定义到一个 store 中，Pinia 支持定义多个 Store 模块

一般来说会一个模块对应一个 store，最后通过一个根 store 进行整合

1、新建 store/user.js 文件

import { defineStore } from "pinia";

const useUserStore = defineStore("user", {
  state: () => {
    return {
      name: "正心全栈编程",
      age: 18,
    };
  },
});

export default useUserStore;

2、新建 store/index.js

import { defineStore } from "pinia";
import useUserStore from "./user";
import useCounterStore from "./counter";

// 封装主 Store，把独立的模块做统一管理，方便开发时使用
const useMainStore = defineStore("main", {
  state: () => ({
    user: useUserStore(),
    counter: useCounterStore(),
  }),
});

export default useMainStore;

3、在组件中使用

<script setup>
import { storeToRefs } from "pinia";
import useMainStore from "./store";

const main = useMainStore();
const { user } = storeToRefs(main);
const { name } = storeToRefs(main.user);
</script>

<template>
  <h1>根组件 --- {{ main.user.name }}</h1>
  <h1>根组件 --- {{ user.name }}</h1>
  <h1>根组件 --- {{ name }}</h1>
</template>

持久化

1、安装模块

pnpm i pinia-plugin-persistedstate

2、添加插件到 pinia 对象

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

3、使用

选项式 api 使用

import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      someState: "hello pinia",
    };
  },
  persist: true,
});

组合式 api 使用

import { defineStore } from "pinia";

export const useStore = defineStore(
  "main",
  () => {
    const someState = ref("hello pinia");
    return { someState };
  },
  {
    persist: true,
  },
);