pinia核心概念
Pinia从使用角度和之前的Vuex一样 Pinia更友好的TypeScipt支持。
Store是保存状态与业务逻辑的实体，有三个核心概念。
可以理解为 data、computed、methods
◆ state：存储全局状态
◆ getters：类似于组件的computed，根据已有state做数据拼接加工，也具有缓存的特性
◆ actions：类似于组件的methods,用来封装业务逻辑，支持同步和异步
使用Pinia
- 安装Pinia
yarn add pinia
npm install pinia
-
创建pinia文件
store文件里index.js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
image.png
- main.js导入并引用
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')
- store下的counter文件内容
import { defineStore } from 'pinia'
// 定义关于counter的store
// defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useCounter = defineStore('counter',{
state: () => {
count:1
},
// 类似 computed 主要做数据加工缓存
getters:{
doubleCounter(){
return this.count * 2
},
actions:{
add(){
this.count++
},
//传参
update(num){
this.count += num
}
}
}
})
在页面中使用 counter 定义的属性
<template>
<div class="home">
<h2>Home View</h2>
<h2>count: {{ counterStore.count }}</h2>
<button @click="incrementCount">count+1</button>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
const counterStore = useCounter()
</script>
可以解构 state 直接调用
const { count } = useCounter()
但会失去响应式，需要 toRef 或者 pinia 自带 storeToRefs 包一层让它有响应式
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
const counterStore = useCounter()
const { count } = toRefs(counterStore)
or
const { count } = storeToRefs(counterStore)
在页面中点击按钮修改store里面的count 值
方法一
const incrementCount = ()=> {
counterStore.count++
}
方法二 $patch 它允许同时多个修改
const incrementCount = ()=> {
counterStore.$patch({
counter:count,
name:'kobe'
})
}
访问store里面的getters 定义的函数
和state 一样的访问方式
const counterSotre = useCounter()
console.log(counterStore.doublCounter)
Actions 使用
const incrementCount = ()=> {
counterStore.add()
counterStore.update(10)
}
支持异步
actions:{
async fetchHome(){
//???请求
const res = await fetch('?????')
const data = await res.json()
console.log('data',data)
return data
}
}
vue页面
const counterSotre = useCounter()
counterStore.fetchHome().then(res => {
console.log(res)
})
重置State：
可以调用store上的$reset()方法将状态重置到其初始值
const counterStore = useCounter()
conterStore.$reset()
替换State
conterStore.$state = {
counter:1,
name:'why'
}
