Pinia module division

pinia The module division of is through js Divided by naming .

Example ：

First step ： Split store file

• store/index.ts

import {
     createPinia } from "pinia"

const store = createPinia()
export default store

• store/user.ts

import {
    defineStore} from "pinia"

export const useUserStore = defineStore({
        //js name 
    id: "user", 
    state: () => {
    
        return {
    
            name: ' Zhang San ',
            age: 18
        }
    }
})

• store/order.ts

import {
    defineStore} from "pinia"

export const useOrderStore = defineStore({
       //js name 
    id: "order", 
    state: () => {
    
        return {
    
            orderList: [{
    id: 1001, total: 6666}, {
    id: 1002, total: 8888}, {
    id: 1003, total: 9999}]
        }
    }
})

The second step ：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>

• 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>