pinia 模块划分

pinia的模块划分是通过js命名来划分的。

示例：

第一步：拆分store文件

• store/index.ts

import { createPinia } from "pinia"

const store = createPinia()
export default store
1
2
3
4

• store/user.ts

import {defineStore} from "pinia"

export const useUserStore = defineStore({    //js命名
    id: "user", 
    state: () => {
        return {
            name: '张三',
            age: 18
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11

• store/order.ts

import {defineStore} from "pinia"

export const useOrderStore = defineStore({   //js命名
    id: "order", 
    state: () => {
        return {
            orderList: [{id: 1001, total: 6666}, {id: 1002, total: 8888}, {id: 1003, total: 9999}]
        }
    }
})
1
2
3
4
5
6
7
8
9
10

第二步：vue

• User.vue

<template>
  User：{{ name }} == {{ age }}
</template>

<script setup lang="ts">
import {storeToRefs} from "pinia"
import {useUserStore} from "@/store/module/user"

const userStore = useUserStore()
const {name, age} = storeToRefs(userStore)
</script>
1
2
3
4
5
6
7
8
9
10
11

• Order.vue

<template>
  order <br>
  {{order}}
</template>
<script setup lang='ts'>
import {storeToRefs} from "pinia"
import {useOrderStore} from "@/store/module/order"
const orderStore = useOrderStore()
const order = storeToRefs(orderStore)
</script>
1
2
3
4
5
6
7
8
9
10