龙岩网站建设亿网行,重庆公司社保多少钱一个月,wordpress sns插件,企业网站的建立费用 作什么科目目录前言#xff1a;一、什么是 Pinai二、安装与使用pinia三、什么是 store四、state1. 定义 state2. 组件中访问 state五、Getters1. 定义 Getters2. 在组件中使用 Getters六、Actions1. 定义Actions2. 组件中访问 Actions总结#xff1a;前言#xff1a; 在编写vue里的项目…
目录前言一、什么是 Pinai二、安装与使用pinia三、什么是 store四、state1. 定义 state2. 组件中访问 state五、Getters1. 定义 Getters2. 在组件中使用 Getters六、Actions1. 定义Actions2. 组件中访问 Actions总结前言 在编写vue里的项目时必须要用到状态管理库我们始终绕不开对 Pinia 的使用 vue3 中对状态管理库进行了一些重要的更新在这里分享给大家 一、什么是 Pinai
Pinia 是 Vue 的专属状态管理库它允许你跨组件或页面共享状态。Pinia 是 Vuex4 的升级版也就是 Vuex5Pinia 极大的简化了 Vuex 的使用是 Vue3 的新的状态管理工具Pinia 对 ts 的支持更好性能更优 体积更小无 mutations可用于 Vue2 和 Vue3Pinia 支持 Vue Devtools、 模块热更新和服务端渲染Pinia 的官方地址为https://pinia.vuejs.org/ 二、安装与使用pinia
安装语法npm install pinia创建一个 pinia根存储并将其传递给应用程序
import { createApp } from vue
import App from ./App.vue// 引入 createPinia 函数
import { createPinia } from piniaconst app createApp(App)// 使用 createPinia() 来创建 Pinia根存储并应用到整个应用中
app.use(createPinia())app.mount(#app)在 src 文件下创建一个 store 文件夹并添加 store.js 文件。 三、什么是 store
store 是一个保存状态和业务逻辑的实体它并不与你的组件树绑定换句话说它承载着全局状态它有点像一个永远存在的组件每个组件都可以读取和写入它store 它有三个概念state、getters 和 actions我们可以l理解成组件中的 data、computed 和 methods在项目中的 src\store 文件夹下不同的 store.js 文件store 是用 defineStore(name, function | options) 定义的建议其函数返回的值命名为 use...Store 方便理解 参数 name名字必填值且唯一参数 function|options可以是对象或函数形式 对象形式【选项模式】其中配置 state、getters 和 actions 选项函数形式【组合模式类似组件组合式 API 的书写方式】定义响应式变量和方法并且 return 对应的变量和方法ref() 相当于 statecomputed() 相当于 gettersfunction() 相当于 actions
选项式
import { defineStore } from pinia// 创建 store并暴露出去
// 参数一名字必填值且唯一
// 参数二选项式书写方式采用对象形式
export const useStore defineStore(main, {state: () ({// ……}), getters: {// ……},actions: {// ……}
})组合式
import { defineStore } from pinia
import { computed, ref } from vue// 创建 store并暴露出去
// 参数一名字必填值且唯一
// 参数二组合式书写方式采用函数形式
export const useStore defineStore(main, () { // ref 变量 --- state// computed() 计算属性 --- getters // functions 函数 --- actionsreturn { // 暴露出去 变量函数计算属性即可}
})四、state
state 是 store 的核心部分主要存储的是共享的数据。 1. 定义 state
store 采用的是选项式模式时state 选项为函数返回的对象在其定义共享的数据store 采用的是组合式模式时在其函数内定义的 ref 变量最终 return 出去来提供共享的数据
选项式
import { defineStore } from piniaexport const useUserStore defineStore(user, {// 共享的数据为函数返回的对象形式state: () ({age: 27,level: 5,account: SD77842,nickname: 自古风流})
})组合式
import {defineStore} from pinia;
import {ref} from vue;export const useUserStore defineStore(user, () {const age ref(27)const level ref(5)const account ref(SD77842)const nickname ref(自古风流)return { age, level, account, nickname } // 将数据暴露出去共享给需要的组件
})2. 组件中访问 state
在选项式 API 组件中可以使用 mapState(storeObj, array | object) 帮助器将状态属性映射为只读计算属性 storeObj 引入的 store 对象array | object字符串数组形式或者对象形式 【字符串数组形式】直接将 store 中 state 的数据映射为当前组件的计算属性但是不能自定义名称【对象形式时】key 为自定义当前组件的计算属性名value 字符串形式是 store 中 state 的共享数据 提示 mapState() 函数映射到组件中的计算属性是只读的如果想在组件中响应式修改 state 的数据则应该选择 mapWritableState() 函数来映射计算属性 在组合式 API 组件中直接引入对应的store通过 store 对象直接获取和修改 state 提示 如果想在组件中自定义变量来接收 store 中的 state 中共享的数据我们可以这样做 使用 computed(() store.dataName)具有响应式但是只读形式使用 storeToRefs(store) 从 store 解构想要的 state具有响应式可直接修改可自定义名称 选项式
script
import { mapState, mapWritableState } from pinia
import { useUserStore } from /store/useUserStore
import UserVue from /components/User.vueexport default {components: { UserVue },computed: {// mapState将 store 的 state 映射成当前组件的计算属性// 具有响应式但是是只读// 字符串数组形式不能自定义计算属性名// 对象形式可以自定义计算属性名...mapState(useUserStore, [age, level]),...mapState(useUserStore, {user_account: account,user_nickname: nickname}),// mapWritableState 与 mapState 用法类似区别它可以响应式的读写映射的计算属性...mapWritableState(useUserStore, [account, nickname]),...mapWritableState(useUserStore, {user_age: age,user_level: level}),}
}
/scripttemplateUserVue/UserVueh2mapState 映射的计算属性/h2ulli年龄{{ age }}/lili等级{{ level }}/lili账号{{ user_account }}/lili昵称{{ user_nickname }}/li/ulbutton clickage 10更改年龄/button|button clickuser_nickname 更改昵称/buttonhrh2mapWritableState 映射的计算属性/h2 ulli年龄{{ user_age }}/lili等级{{ user_level }}/lili账号{{ account }}/lili昵称{{ nickname }}/li/ulbutton clickuser_age 10更改年龄/button|button clicknickname 更改昵称/button/template组合式
script setup
import { useUserStore } from /store/useUserStore
import { storeToRefs } from pinia
import { computed } from vue
import UserVue from /components/User.vue// 获取 UserStore 实例
const user_store useUserStore()// 通过 computed() 将 store 中 state 映射成当前组件中的计算属性具有响应性但是是只读的
const user_age computed(() user_store.age)
const user_level computed(() user_store.level)
const user_account computed(() user_store.account)
const user_nickname computed(() user_store.nickname)// storeToRefs 将 store 中 state 解构为组件的数据具有响应性还可以响应式修改
const { age, level,account: userAccount,nickname: userNickname
} storeToRefs(user_store)
/scripttemplateUserVue/UserVueh2从 store 直接取 state /h2ulli年龄{{ user_store.age }}/lili等级{{ user_store.level }}/lili账号{{ user_store.account }}/lili昵称{{ user_store.nickname }}/li/ulbutton clickuser_store.age 10更改年龄/button|button clickuser_store.nickname 更改昵称/buttonhrh2computed 映射为计算属性/h2ulli年龄{{ user_age }}/lili等级{{ user_level }}/lili账号{{ user_account }}/lili昵称{{ user_nickname }}/li/ulbutton clickuser_age 10更改年龄/button|button clickuser_nickname 更改昵称/buttonhrh2storeToRefs 解构成自己的数据/h2ulli年龄{{ age }}/lili等级{{ level }}/lili账号{{ userAccount }}/lili昵称{{ userNickname }}/li/ulbutton clickage 10更改年龄/button|button clickuserNickname 更改昵称/button/template五、Getters
getters 是计算得到的新的共享数据当依赖的数据发生变化时则重新计算所以其他组件包括 store 自己不要直接对其修改。 1. 定义 Getters
store 采用的是选项式模式时getters 选项中声明的函数即为计算属性 在其函数内可通过 this 关键字来获取 store 实例也可通过方法的第一个参数得到 store 实例如果采用的是箭头函数的话无法使用 this 关键字为了更方便使用 store 中实例可为其箭头函数设置第一个参数来获取 store 实例 store 采用的是组合式模式时可通过 computed() 函数通过计算得到新的数据再将其 return 暴露出去即可。
选项式
import { defineStore } from piniaexport const useUserStore defineStore(user, {state: () ({birthday: 1992-12-27,age: 30}),// 通过计算得到的新的共享的数据只读// 如果依赖的数据发生变化则会重新计算getters: {month() {// this 为 store 实例当然其函数的第一个参数也为 store 实例return this.birthday.split(-)[1] },// 因箭头函数无法使用 this函数的第一个参数为 store 实例ageStage: store {if(store.age 18) return 未成年if(store.age 35) return 青年if(store.age 50) return 中年if(store.age 50) return 老年}}
})组合式
import { defineStore } from pinia
import { computed, ref } from vueexport const useUserStore defineStore(user, () {const birthday ref(1992-12-27)const age ref(30)// 声明通过计算得到的共享数据是只读的如果依赖的数据发生变化则会重新计算const month computed(() {return birthday.value.split(-)[1]})const ageStage computed(() {if (age.value 18) return 未成年if (age.value 35) return 青年if (age.value 50) return 中年if (age.value 50) return 老年})return { birthday, age, month, ageStage }})2. 在组件中使用 Getters
选项式 API 的组件中访问 store 中的 getters 和访问 state 类似同样可使用 mapState() 帮助器将 getters 属性映射为只读计算属性 注意 如果采用 mapWritableState() 帮助器将 store 中的 getters 映射为组件内部的计算属性依旧可以具有响应式一旦对其进行修改则会报错 在组合式 API 组件中访问 store 中的 getters 和访问 state 类似直接引入对应的 store 通过 store 对象直接获取 getters但是如果对其进行修改则会报错 提示 如果想将 store 中的 getter 中共享的数据映射为本地组件的计算属性我们可以这样做 使用 computed(() store.getterName)具有响应式但是只读形式 使用 storeToRefs(store) 从 store 解构 getter 依旧是计算属性所以是只读的一旦对其进行修改则会报错但是具有响应式可自定义名称 选项式
script
import { mapState, mapWritableState } from pinia
import { useUserStore } from ./store/useUserStoreexport default {computed: {// 从 store 中映射 getters 和映射 state 用法相同都可以用 mapState// 具有响应式但是是只读的如果修改了则会警告...mapState(useUserStore, [month]),...mapState(useUserStore, {user_age_stage: ageStage}),// 从 store 中 映射 getters 和映射 state 用法相同都可以用 mapWritableState// 具有响应式但是是只读的如果修改了则会报错...mapWritableState(useUserStore, [ageStage]),...mapWritableState(useUserStore, {birthday_month: month}),// 把 store 中 stage 解构为自己的计算属性...mapWritableState(useUserStore, [birthday, age])}
}
/scripttemplateh3mapState 字符串数组形式将 getters 映射成计算属性/h3ulli月份{{ month }}/li/ulbutton clickmonth 5更改月份/buttonhrh3mapState 对象形式将 getters 映射成计算属性/h3ulli年龄阶段{{ user_age_stage }}/li/ulbutton clickuser_age_stage 未知更改年龄阶段/buttonhrh3mapWritableState 字符串数组形式将 getters 映射成计算属性/h3ulli年龄阶段{{ ageStage }}/li/ulbutton clickageStage 未知更改年龄阶段/buttonhrh3mapWritableState 对象形式将 getters 映射成计算属性/h3ulli月份{{ birthday_month }}/li/ulbutton clickbirthday_month 5更改年龄阶段/buttonhr生日input typedate v-modelbirthday|年龄input typenumber min1 max100 v-modelage
/template组合式
script setup
import { storeToRefs } from pinia
import { computed } from vue
import { useUserStore } from ./store/useUserStore// store 实例可直接通过 store 获取 getters, 但是是只读的如果一旦修改则会报错
const user_store useUserStore()// 通过 computed 将 getters 映射为自己的计算属性 但是是只读的如果一旦修改则会警告
const birthday_month computed(() user_store.month)
const user_age_stage computed(() user_store.ageStage)// 通过 storeToRefs 将 getters 解构为自己的计算属性 但是是只读的如果一旦修改则会警告
const { month, ageStage: userAgeStage } storeToRefs(user_store)// 将 state 解构为自己的数据
const { birthday, age } storeToRefs(user_store)/scripttemplateh3通过 store 直接获取 getters/h3ulli月份{{ user_store.month }}/lili年龄阶段{{ user_store.ageStage }}/li/ulbutton clickuser_store.month 5更改月份/button|button clickuser_store.ageStage 未知更改年龄阶段/buttonhrh3通过 computed 将 getters 映射为自己的计算属性/h3ulli月份{{ birthday_month }}/lili年龄阶段{{ user_age_stage }}/li/ulbutton clickbirthday_month 5更改月份/button|button clickuser_age_stage 未知更改年龄阶段/buttonhrh3通过 storeToRefs 将 getters 映射为自己的计算属性/h3ulli月份{{ month }}/lili年龄阶段{{ userAgeStage }}/li/ulbutton clickmonth 5更改月份/button|button clickuserAgeStage 未知更改年龄阶段/buttonhr生日input typedate v-modelbirthday| 年龄input typenumber min1 max100 v-modelage
/template六、Actions
actions 一般情况下是对 state 中的数据进行修改的业务逻辑函数actions 也可以是异步的您可以在其中 await 任何 API 调用甚至其他操作 1. 定义Actions
store 采用的是选项式模式时actions 选项中声明的函数即可共享其函数在其函数内可通过 this 来获取整个 store 实例store 采用的是组合式模式时可通过声明函数再将其 return 暴露出去即可共享其函数
选项式
import {defineStore} from piniaexport const useUserStore defineStore(user, {state: () ({nickname: 自古风流,age: 20}),// 定义共享的函数其主要是修改 state 中的数据的逻辑代码// 其函数可以是异步的actions: {setUserInfo(nickname, age) {// 可通过 this 来获取当前 store 实例this.nickname nicknamethis.age age},setUserInfoByObject(user) {this.nickname user.nicknamethis.age user.age}}
})组合式
import {defineStore} from pinia
import {ref} from vue;export const useUserStore defineStore(user, () {const nickname ref(自古风流)const age ref(20)// 定义函数注意形参不要和 ref 名冲突function setUserInfo(user_nickname, user_age) {nickname.value user_nicknameage.value user_age}function setUserInfoByObject(user) {// 可通过 this 来获取当前 store 实例nickname.value user.nicknameage.value user.age}return {nickname, age, setUserInfo, setUserInfoByObject} // 暴露函数即可共享函数
})2. 组件中访问 Actions
在选项式 API 组件中可以使用 mapActions(storeObj, array | object) 帮助器将 actions 映射为当前组件的函数 storeObj 引入的 store 对象array | object字符串数组形式或者对象形式 【字符串数组形式】直接将 store 中 actions 的函数映射为当前组件的函数但是不能自定义名称【对象形式时】key 为自定义当前组件的函数名value 字符串形式是 store 中 actions 的函数名 在组合式 API 组件中直接引入对应的 store通过 store 对象直接获取 actions 提示 如果想将 store 中的 actions 中函数映射为本地组件的函数可将 store 解构出对应的函数即可也可自定应函数名此处不可通过 storeToRefs(store) 函数 选项式
script
import {mapActions, mapState} from pinia
import {useUserStore} from /store/useUserStoreexport default {computed: {...mapState(useUserStore, [nickname, age])},methods: {// 使用 mapActions 将 store 中的 actions 映射为自己的函数// 采用函数形式无法自定义映射的函数名// 采用对象形式可自定义映射的函数名...mapActions(useUserStore, [setUserInfo]),...mapActions(useUserStore, {set_info_by_object: setUserInfoByObject})}
}
/scripttemplateulli昵称{{ nickname }}/lili昵称{{ age }}/li/ulbutton clicksetUserInfo(Tom, 15)修改信息/buttonbutton clickset_info_by_object({ nickname: Jack, age: 40})修改信息/button
/template组合式
script setup
import {useUserStore} from /store/useUserStore
import { storeToRefs } from pinia// 可直接使用 store 执行 actions
const user_store useUserStore()
const {nickname, age} storeToRefs(user_store)// 可将 store 中的 actions 映射为自己的函数可自定映射的函数名不可使用 storeToRes 函数
const {setUserInfo, setUserInfoByObject: set_user_info_object} user_store
/scripttemplateulli昵称{{ nickname }}/lili昵称{{ age }}/li/ulspan直接使用 store 执行 actions/spanbutton clickuser_store.setUserInfo(Tom, 15)修改信息/buttonbutton clickuser_store.setUserInfoByObject({ nickname: Jack, age: 40})修改信息/buttonhrspan将 store 中的 actions 映射成自己的函数/spanbutton clicksetUserInfo(Annie, 45)修改信息/buttonbutton clickset_user_info_object({ nickname: Drew, age: 50})修改信息/button
/template总结 欢迎大家加入我的社区在社区中会不定时发布一些精选内容https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category10003 以上就是 Vue3 的状态管理库Pinia不懂得也可以在评论区里问我或私聊我询问以后会持续发布一些新的功能敬请关注。 我的其他文章https://blog.csdn.net/weixin_62897746?typeblog
