Pinia怎么分模块?

808 阅读1分钟

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

store中的目录结构

store/user.ts
store/shop.ts
store/menu.ts

store/user.ts

import { defineStore } from 'pinia'

export const user = defineStore({
    id: 'user',
    state:()=>{
        return {
            userInfo: {
                name: "栗子"
            }
        }
    }
})

页面组件使用

//引入解构
import { storeToRefs } from 'pinia'
//引入store
import { user } from '../store/user'

const store = user();
// 解构store/user.ts中userInfo的信息,让数据变成响应式,这样就可以在组件中修改store中的数据
let { userInfo } = storeToRefs(store);

// 可以使用$patch对state进行批量更新
store.$patch(state=>{
    state.userInfo = { name: "追风的栗子" }
})