目录什么是Pinia呢?Pinia和Vuex的区别与Vuex相比,Pinia很多的优势:如何使用Piniastore的核心部分:state,getter,action认识和定义Sta
Pina开始于大概2019,是一个状态管理的库,用于跨组件、页面进行状态共享(这和Vuex、Redux一样),用起来像组合式api(Composition API)
比如mutations不再存在:
更友好的TpeScipt支持,Vuex之前对Ts的支持很不友好
不在有modules的嵌套结构
不在有命名空间的概念,不在需要记住他们的复杂关系
1、安装Pinia
2、创建pinia文件
store文件里index.js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
3、main.js导入并引用
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')
4、pinia的状态管理,不同状态可以区分不同文件
//定义关于counter的store
import { defineStore } from ‘pinia'
//defineStore 是返回一个函数 函数命名最好有use前缀,根据函数来进行下一步操作
const useCounter = defineStore('counter',{
state: () => {
count:99
}
})
export default useCounter
5、调用pinia,获取pinia状态值,导入Counter.js,获取Counter.js里面state.count
<template>
<div class="home">
<h2>Home View</h2>
<h2>count: {{ counterStore.count }}</h2>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
const counterStore = useCounter()
</script>
<style scoped>
</style>
注意:pinia解构出来的state也是可以调用,但会失去响应式,需要toRef或者pinia自带storeToRefs
<template>
<div class="home">
<h2>Home View</h2>
<h2>count: {{ counterStore.count }}</h2>
<h2>count: {{ count }}</h2>
<button @click="incrementCount">count+1</button>
</div>
</template>
<script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import useCounter from '@/stores/counter';
const counterStore = useCounter()
// const { count } = toRefs(counterStore)
const { count } = storeToRefs(counterStore)
function incrementCount() {
counterStore.count++
}
</script>
<style scoped>
</style>
(相当于:data、computed、methods)
state是store的核心部分,因为store是用来帮助我们管理状态
1.读取和写入state:
默认情况下,可以通过store实例访问状态来直接读取和写入状态;
```
const counterStore = useCounter()
counterStore.counter++
counterStore.name = 'coderWhy'
```
2.重置State:
可以调用store上的$reset()方法将状态重置到其初始值
const counterStore = useCounter()
conterStore.$reset()
3.改变State
const counterStore = useCounter()
counterStore.$patch({
counter:100,
name:'kobe'
})
4.替换State
可以通过将其$state属性设置为新对象替换Store的整个状态
conterStore.$state = {
counter:1,
name:'why'
}
Getters相当于Store的计算属性:
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
doubleCounter(state){
return state.counter *2
}
}
})
访问Store里getters方法
1.访问当前store的getters:
const counterSotre = useCounter()
console.log(counterStore.doublCounter)
2.我们可以使用this来访问当前的store实例中getters
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
doubleCounter(state){
return state.counter *2
}
doubleCounterAdd(){
//this指向store
return this.doubleCounter +1
}
}
})
3.访问其它store的getters
import useUser from ./user
const userStore = useUser()
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//调用其它Store
doubleCounterUser(){
return this.doubleCounter + userStore.umu
}
}
})
4.通过getters可以返回一个函数,可以传参数
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//调用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
}
})
const StoreConter = useCounter();
//传参
StoreCounter.doublCounter(111)
Actions 相当于组件中的methods,可以使用defineStore()中的actions属性定义
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//调用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
},
actions:{
increment(){
this.counter++
},
//传参
incrementnum(num){
this。counter += num
}
}
})
和getters一样,在action中可以通过this访问整个store实例:
function increment(){
//调用
counterStore.increment()
}
function incrementnum(){
counterStore.increment(10)
}
Actions中是支持异步操作的,并且我们可以编写异步函数,在函数中使用await
actions:{
async fetchHome(){
//???请求
const res = await fetch('?????')
const data = await res.JSON()
console.log('data',data)
return data
}
}
cosnt counterStore = useCounter
counterStore.fetchHome().then(res => {
console.log(res)
})
到此这篇关于vue3中Pinia基本使用的文章就介绍到这了,更多相关Vue3 Pinia使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue3中Pinia的基本使用笔记
本文链接: https://www.lsjlt.com/news/169289.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0