核心概念-Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

xxxxxxxxxx
import { createStore } from "vuex"
import login from "./login"
import order from "./order"

const store = createStore({
    modules:{
        login,
        order
    }
})
export default store

xxxxxxxxxx
export default {
    state:{
        token:"HHO56897gh"
    }
}

xxxxxxxxxx
export default {
    state:{
        orders:[
            {
                id:1001,
                name:"牙膏"
            },
            {
                id:1002,
                name:"牙刷"
            }
        ]
    }
}

xxxxxxxxxx
<template>
    <h3>登录</h3>
    <p>{{ $store.state.login.token }}</p>
</template>
<script setup>
</script>

xxxxxxxxxx
<template>
    <h3>订单</h3>
    <ul>
        <li v-for="(item,index) in $store.state.order.orders" :key="index">
            <p>{{ item.name }}</p>
        </li>
    </ul>
</template>
<script>
export default {}
</script>