Pinia怎么分模块?

4/30/2023 Pinia

# 一、目录结构

Pinia 不需要像 Vuex 一样使用 modules 分模块,Pinia 可在 store 目录中直接定义对应模块就可以了

store / user.js;
store / shop.js;
1
2

# 二、store/user.js

import { defineStore } from "pinia";

export const user = defineStore({
  id: "user",
  state: () => {
    return {
      userInfo: {
        nickName: "章三",
      },
      token: "xfdfdsjkdsj",
    };
  },
  getters: {},
  actions: {},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 三、某组件使用

<template>
	<div>
		<h1>A组件</h1>
		{{ userInfo.nickName }}
	</div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
Last Updated: 11/8/2023, 10:40:28 AM