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: "追风的栗子" }
})