网站怎么做公司,wordpress inherit,建立企业网站的步骤,网站制作售后集中式状态管理工具—pinia
vue3中使用pinia作为集中式状态管理工具#xff0c;替代vue2中的vuex。 pinia文档可参考: https://pinia.web3doc.top/introduction.html 1.项目集成pinia
安装pinia依赖:
npm install pinia在main.ts中引入pinia
import { createApp } from vu…集中式状态管理工具—pinia
vue3中使用pinia作为集中式状态管理工具替代vue2中的vuex。 pinia文档可参考: https://pinia.web3doc.top/introduction.html 1.项目集成pinia
安装pinia依赖:
npm install pinia在main.ts中引入pinia
import { createApp } from vue
import App from ./App.vue// 从pinia库引入createPinia方法
import { createPinia } from pinia//调用createPinia方法创建pinia对象设置到APP中
createApp(App).use(createPinia()).mount(#app)2.定义store
pina提供了defineStore方法创建storestore作为集中式状态管理的实体可被任意组件读取/写入数据。定义的store一般放在src/stores目录下。
import {defineStore} from pinia// 定义并暴露一个store
export const useXXXStore defineStore(XXX, {// 配置信息
})defineStore方法接收两个参数store的唯一标识符和store的配置对象。其中store配置对象中可以包含 state函数、actions对象、getters对象。 state中可以定义状态信息getters基于state定义计算属性actions中定义state相关的操作方法。以下结合案例进行说明
// src/stores/clock.tsimport { defineStore } from piniaexport const useClockStore defineStore(clock, {state: () {return { hourHand: 0,minuteHand: 0,secondHand: 0}},getters:{time() {return this.hourHand 时: this.minuteHand 分: this.secondHand 秒;}},actions: {increHour() {this.hourHand;},getTime() {return this.time;}},
})state中包含3个状态属性:hourHand和minuteHand和secondHand初始值和默认值为0 getters中定义了一个获取时间的方法time()根据状态值计算出时间信息 actions中定义了一个修改状态变量的方法和一个获取计算属性的方法。
3.使用store
在任意组件中可以引入和使用章节2中定义的store方式如下:
import { useClockStore } from /stores/clock
const clockStore useClockStore()得到clockStore这个store后可以直接在template或者script脚本中通过属性名获取state的属性(含计算属性):
clockStore.time
clockStore.hourHand
clockStore.minuteHand
clockStore.secondHand也可以调用store在actions中定义的方法:
clockStore.increHour()
clockStore.getTime()使用章节2中定义的clock.ts完整的案例组件如下所示:
template
divpspan{{clockStore.hourHand}}/spanspan:/spanspan{{clockStore.minuteHand}}/spanspan:/spanspan{{clockStore.secondHand}}/span/pbutton clickaddHouraddHourBtn/buttonbutton clickshowTimeshowTimeBtn/button/div
/templatescript langts setupimport { useClockStore } from /stores/clock.ts;const clockStore useClockStore();function addHour() {clockStore.increHour();}function showTime() {alert(clockStore.time);}
/script此时clockStore中的状态属性和计算属性作为响应式数据。 除了上述通过store中actions定义的方法外还可通过以下方式直接修改状态值:
clockStore.hourHand12// 批量修改
clockStore.$patch({hourHand:12,minuteHand:30,secondHand:0
})4.响应式状态提取
章节3中提到过clockStore对象的状态属性和计算属性作为响应式数据且可以直接操作clockStore对象的属性。 但是如果将其进行提取则会失去响应式:
// clockStore.hourHand为响应式修改为12后页面会发生变化
clockStore.hourHand12// hour不是响应式对象
let hour clockStore.hourHand可以通过pinia的storeToRefs为其提供了一个解决方案:
import { storeToRefs } from pinia// 根据状态名称进行提取
const {hourHand, minuteHandsecondHand} storeToRefs(clockStore)
hourHand.value hourHand.value 100;此时可以在template结构中直接使用hourHand, minuteHandsecondHand而不需要再使用clockStore.hourHand, clockStore.minuteHandclockStore.secondHand. 解析出的数据为ObjectRefImpl类型因此在script脚本中修改和获取值时需要使用.value进行值的提取。
5.订阅store状态变化
可以通过store对象的$subscribe方法监听状态的变化使用如下所示:
import { useClockStore } from /stores/clock.ts;
const clockStore useClockStore();clockStore.$subscribe((mutate, state){// 定制操作console.log(mutate)console.log(state)
})mutate中包含了发生变化的属性key以及变化前后的值state为更新后的状态对象。 mutate参数打印信息如下:
{storeId: clockStore, type: direct, events:{key: hourHand, oldValue: 0, newValue: 1}}state参数打印信息如下:
Proxy {hourHand: 1, minuteHand: 0, secondHand: 0}
