惠州网站公司,wordpress用户修改头像,专门做网站的公司与外包公司,晚上必看的正能量直播app文章目录 一、介绍二、install三、store1、创建并全局引入2、使用 本人最近在找工作#xff0c;有推荐的小伙伴私我#xff0c;不胜感激。
一、介绍
官网#xff1a;https://pinia.web3doc.top/introduction.htmlPinia 是 Vue 官方团队开发的一个全新状态管理库Vue2和Vue3… 文章目录 一、介绍二、install三、store1、创建并全局引入2、使用 本人最近在找工作有推荐的小伙伴私我不胜感激。
一、介绍
官网https://pinia.web3doc.top/introduction.htmlPinia 是 Vue 官方团队开发的一个全新状态管理库Vue2和Vue3都可以使用去除了mutations简化了状态管理的使用支持TSVuex对TS的语法支持不是完整的去除了命名空间模块鉴于 Store 的扁平架构“命名空间” Store 是其定义方式所固有的因为每个store都会有唯一的store id
二、install
pnpm install pinia --save三、store
1、创建并全局引入 创建src/store/index.ts main.ts中全局注册
// 引入pinia
import { createPinia } from pinia// 挂载到vue根实例
createApp(App).use(createPinia)2、使用
index.js
import {defineStore} from pinia/*** 创建第1个store** userStore容器名称* userstore的id必须唯一*/
export const userStore defineStore(user, {state: () {return {user: {name: kimi,age: 18,honor: [1-三好学生,1-优秀班干部,2-优秀班干部]}}},//普通函数的写法时函数中的this代表该storegetters: {/*** 使用store** param store* returns*/getUserHonorNum: (store) {return store.user.honor.length},/*** 使用本store的getters** param store* returns*/getUserAvgHonorNum: (store) {return store.getUserHonorNum / 3},/*** 传入自定义参数** param store* returns*/getUserAvgHonorNumber: (store) {return (year) {return store.getUserHonorNum / year}},/*** 访问其它store中的getters** param store* returns*/getAppNum: (store) {//导入其它storeconst otherStore appStore()return otherStore.num}},//actions书写格式和methods一样因为他不会传入任何默认参数//普通函数的写法时函数中的this代表该storeactions: {/*** 年龄1异步操作2秒之后再执行*/setAgeIncrement() {setTimeout(() {this.user.age}, 2000)},/*** 传入自定义参数 - 单个** param age*/setAge(age) {this.user.age age},/*** 传入自定义参数 - 多个** param name* param age*/setUser(name, age) {this.$patch((state) {state.user.name namestate.user.age age})}}
})/*** 创建第2个store*/
export const appStore defineStore(app, {state: () {return {num: 5}},getters: {},actions: {}
})组件中使用
script setup
import { storeToRefs } from pinia
import {userStore} from /store/index//1、state
//访问state
userStoreData.user//就像setup 中的props 一样我们不能对其进行解构因为它会破坏响应式
const { user } userStoreData//为了从 Store 中提取属性同时保持其响应式可以使用pinia的storeToRefs() 它将为任何响应式属性创建refs
const { user } storeToRefs(userStoreData)//直接修改state中的共享状态
userStoreData.user.age//批量修改state中的共享状态通过调用 $patch 方法
userStoreData.$patch((state) {state.user.name sallystate.user.age
})//通过调用store上的$reset()方法将状态重置到其初始值
userStoreData.$reset()//订阅状态与常规的 watch() 相比使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次
userStoreData.$subscribe((mutation, state) {/*打印一下mutation{//类型type: direct、patch object、patch function,//store的id创建store的第一个参数storeId: user,events:{......}}*/
})//2、getters
userStoreData.getUserHonorNum
userStoreData.getUserAvgHonorNum
userStoreData.getUserAvgHonorNumber(3)//传入自定义参数
userStoreData.getAppNum//3、actions
userStoreData.setAgeIncrement()
userStoreData.setAge(20)//传入自定义参数 - 单个
userStoreData.setUser(sally,25)//传入自定义参数 - 多个
/script
