Pinia怎么分模块?
luffy 4/30/2023 Pinia
# 一、目录结构
Pinia 不需要像 Vuex 一样使用 modules 分模块,Pinia 可在 store 目录中直接定义对应模块就可以了
store / user.js;
store / shop.js;
1
2
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
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
2
3
4
5
6
7
8
9
10
11
12
13