pinia的具体使用方法
pinia的具体使用方法1.安装(pinia支持Vue2和Vue3)安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本//使用npmnpm install pinia@next//使用yarnyarn add pinia@next2.核心概念与基本使用Store是一个保存状态和业务逻辑的实体,可以自由的读取和写入,并且通过导入setup中使用创建一个store
·
pinia的具体使用方法
1.安装(pinia支持Vue2和Vue3)
安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本
//使用npm
npm install pinia@next
//使用yarn
yarn add pinia@next
2.核心概念与基本使用
Store是一个保存状态和业务逻辑的实体,可以自由的读取和写入,并且通过导入setup中使用
创建一个store
import { defineStore } from 'pinia'
//定义容器
//参数1:容器的id,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值是一个函数,调用得到容器实列
export const useMainStore=defineStore('main',{
//state类似于组件的data,用来存储全局状态的
//state必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
//必须是箭头函数,这是为了TS更好的类型推导
state:()=>{
return{
count:100,
foo:'ber',
arr:[1,2,3]
}
},
#####Getter的基本使用
//getters 类似于组件的computed,用来封装计算属性,有缓存功能
//和vuex中的getters没有区别
getters:{
// 方式一:这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
count10(state){
return state.count+20
}
//方式二:getters也可使用this
//直接使用this,ts不会推导出返回值是什么类型,所以要手动标明返回值的类型
count10():number{
return this.count+20
}
// 方式三:传递参数,但不使用参数,直接用this,获取值也可,自动推出返回值类型(不推荐使用)
count10(state){
return this.count+20
}
},
#####actions的基本使用
//类似于组件的methods, 封装业务逻辑,修改state
actions:{
//注意不能使用箭头函数定义actions:因为箭头函数绑定外部this,会改变this指向
//actions就是 通过this返回当前容器实例
// 这里的actions里的事件接受参数
// 这里的num:number为自定义参数,需要声明参数类型
changeState(num:number){
this.count++;
this.count+=num
this.foo='hello!'
this.arr.push(4)
// 同理,actions里也可使用$patch
this.$patch({})
this.$patch(state=>{})
//在此注意:patch和普通多次修改的区别在原理上的区别是
// 1.涉及到数据响应式和视图更新,多次修改,修改几次视图就更新就更新几次
// 2.patch 批量修改 视图只更新一次,更有利于性能优化
}
}
完整的store.ts代码
import { defineStore } from 'pinia'
//定义容器
//参数1:容器的id,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值是一个函数,调用得到容器实列
export const useMainStore=defineStore('main',{
//state类似于组件的data,用来存储全局状态的
//state必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
//必须是箭头函数,这是为了TS更好的类型推导
state:()=>{
return{
count:100,
foo:'ber',
arr:[1,2,3]
}
},
//getters 类似于组件的computed,用来封装计算属性,有缓存功能
//和vuex中的getters没有区别
getters:{
// 方式一:这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
count10(state){
return state.count+20
}
//方式二:getters也可使用this
//直接使用this,ts不会推导出返回值是什么类型,所以要手动标明返回值的类型
count10():number{
return this.count+20
}
// 方式三:传递参数,但不使用参数,直接用this,获取值也可,自动推出返回值类型(不推荐使用)
count10(state){
return this.count+20
}
},
//类似于组件的methods, 封装业务逻辑,修改state
actions:{
//注意不能使用箭头函数定义actions:因为箭头函数绑定外部this,会改变this指向
//actions就是 通过this返回当前容器实例
// 这里的actions里的事件接受参数
// 这里的num:number为自定义参数,需要声明参数类型
changeState(num:number){
// this.count++;
this.count+=num
this.foo='hello!'
this.arr.push(4)
// 同理,actions里也可使用$patch
this.$patch({})
this.$patch(state=>{})
//在此注意:patch和普通多次修改的区别在原理上的区别是
// 1.涉及到数据响应式和视图更新,多次修改,修改几次视图就更新就更新几次
// 2.patch 批量修改 视图只更新一次,更有利于性能优化
}
}
})
//使用容器中的state
//修改 state
//容器中的actions的使用
创建一个index.vue —> 调用store.ts
<template>
<p>{{mainStore.count}}</p>
<p>{{mainStore.arr}}</p>
{{mainStore.count10}}
<hr/>
//解构mainStore后的渲染
<p>{{count}}</p>
<p>{{foo}}</p>
<hr/>
<p>
<button @click="handleChangeState">修改数据</button>
</p>
</template>
<script lang="ts" setup>
import {useMainStore} from '../store/index'
import {storeToRefs} from 'pinia'
const mainStore =useMainStore()
console.log(mainStore.count)
//可以直接解构mainStore,但是这样是有问题的,这样拿到的数据不是响应式的,是一次性的,之后count和foo的改变这里是不会变的
//Pinia其实就是把state数据都做了reactive处理了
const { count,foo}=mainStore
//解决不是响应式的办法 官方的一个api storeToRefs
// storeToRefs的原理是把结构出来的数据做ref响应式代理
const { count,foo}=storeToRefs(mainStore)
const handleChangeState=()=>{
// 数据的修改
// 方式一:最简单的方式,直接调用修改
mainStore.count++
//方式二:如果要修改多个数据,建议使用$patch 批量更新
// mainStore.$patch({
count:mainStore.count+1,
foo:'hello!',
arr:[...mainStore.arr,4]
})
// 方式三:更好的批量更新的函数:$patch是一个函数,这个也是批量更新
// 这里的state index.ts里的state
mainStore.$patch(state=>{
state.count++
state.foo='hello!'
state.arr.push(4)
})
//方式四:逻辑比较多的时候封装到actions中做处理
mainStore.changeState(10)
}
</script>
pinia调试小工具
更多推荐
已为社区贡献1条内容
所有评论(0)