一起学习pinia!
— 前提准备 —
1 项目根目录下载安装pinia
npm i pinia
2 准备一个vue页面,如a.vue
<template>
<!-- 这是一个空的vue文件 等会用于测试pinia管理的公共数据 -->
</template>
<script setup>
</script>
<style>
</style>
3 在main.js引入和使用pinia,并存入一个数据
3-1:mian.js中加入下面代码
// 1.引入pinia
import { createPinia } from 'pinia'
let app = createApp(App);
// 2.创建pinia 注意这个写在app创建之后
const pinia = createPinia()
// 3.使用pinia
app.use(pinia)
3-2:在src下面新建一个store的文件夹,里面新建一个count.js,意思是专门管理计算相关的数据,也就是说store下可以有多个数据管理的js文件
3-3:count.js中写入如下代码,这是官方规定的写法
// 引入pinia的实际操作者(不知道咋说这个,我自己起的名哈哈)
import { defineStore } from "pinia"
// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
state() {
return {
count: 0, // 组件要使用的公共数据
}
}
})
— 读取值 —
在a.vue中写入如下代码
<template>
<h1>{{ countStore.count }}</h1>
</template>
<script setup>
// 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
// useCountStore方法最终是返回了一个值 这个值就是state下面count
import { useCountStore } from "../store/count.ts"
// 所以可以直接调用useCountStore这个方法 就可以拿到count的值
let countStore = useCountStore()
console.log(countStore.count,"从store中获取的count值")
</script>
<style scoped>
h1{
text-align: center;
margin-top: 50px;
}
</style>
到这里,组件中读取pinia管理的数据就ok了。下面来看如何修改数据...
— 修改值 —
1 在页面中修改或操作pinia里的数据
方法1-直接修改:
pinia的数据修改可以直接写个方法用前面拿到的值来修改
// 定义一个方法 用来修改count的值
// 可以直接通过前面获取到的countStore.count来修改count的值
function addFun(){
countStore.count += 1
}
所以a.vue中代码添加为下面代码:
<template>
<h1>{{ countStore.count }}</h1>
<button @click="addFun">加1</button>
</template>
<script setup>
// 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
// useCountStore方法最终是返回了一个值 这个值就是state下面count
import { useCountStore } from "../store/count.ts"
// 所以可以直接调用useCountStore这个方法 就可以拿到count的值
let countStore = useCountStore()
console.log(countStore.count,"从store中获取的count值")
// 定义一个方法 用来修改count的值
// 可以直接通过前面获取到的countStore.count来修改count的值
function addFun(){
countStore.count += 1
}
</script>
<style scoped>
h1{
text-align: center;
margin-top: 50px;
}
button{
display: block;
margin: 10px auto;
width: 60px;
}
</style>
此时点击按钮即可实现数据加的效果,且数据是响应式的。
方法2-使用$patch:
有时候会遇到需要修改大量的数据,这时候按照上面的方法一个一个去修改就显得不太好了,所以pinia提供一个使用$patch对象的形式去修改的方法
即把修改方法改为如下:
function addFun(){
// countStore.count += 1
// 使用对象形式修改数据
// 注意:这里修改的值 不会立即更新到页面中 需要使用$patch方法
countStore.$patch({
count: countStore.count + 1,
count2: countStore.count + 10,
count3: countStore.count * 20,
// 其他需要修改的值
})
}
方法3-使用actions:
count.js代码如下,添加了actions部分
// 引入pinia的实际操作者(不知道咋说这个,我自己起的名哈哈)
import { defineStore } from "pinia"
// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
state() {
return {
count: 0, // 组件要使用的公共数据
}
},
actions: {
// 组件要使用的公共方法
addCount(val){
console.log('addCount公共方法被调用')
this.count += val
}
}
})
a.vue中代码如下,修改了addFun方法
<template>
<h1>{{ countStore.count }}</h1>
<button @click="addFun">加</button>
</template>
<script setup>
// 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
// useCountStore方法最终是返回了一个值 这个值就是state下面count
import { useCountStore } from "../store/count.ts"
// 所以可以直接调用useCountStore这个方法 就可以拿到count的值
let countStore = useCountStore()
console.log(countStore.count,"从store中获取的count值")
function addFun(){
// actions中定义的方法来操作修改count数据 countStore.方法名(传参)
countStore.addCount(10)
}
</script>
<style scoped>
h1{
text-align: center;
margin-top: 50px;
}
button{
display: block;
margin: 10px auto;
width: 60px;
}
</style>
— 加工值 —
1 getters修饰加工pinia数据
count.js中添加getters部分
// 引入pinia的实际操作者(不知道咋说这个,我自己起的名哈哈)
import { defineStore } from "pinia"
// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
state() {
return {
count: 1, // 组件要使用的公共数据
}
},
getters:{
// 对state的数据进行处理 返回处理后的数据
// 必须return一个值 这个ProcessedCount值可以直接在组件中使用
ProcessedCount(){
return this.count * 100
}
}
})
a.vue中可以直接使用getters处理后的数据
<template>
<h1>{{ countStore.count }}</h1>
<button @click="addFun">加</button>
<h2>getters处理的数据:{{countStore.ProcessedCount}}</h2>
</template>
— 监听值 —
1 监听pinia的数据变化$subscribe
每一个store实例都有$subscribe这个方法,state的数据一发生改变,此函数就会执行
// 监听count值的变化
countStore.$subscribe((mutation, state) => {
console.log('count值的变化了', mutation, state)
})
— 读值写法简化 —
1 storeTorefs简化读取值的写法
由于现在的模板读取store值的写法都是countStore.xxxx这样的写法,导致每次读值都需要写countStore.这个东西,storeTorefs即可简化省去这个它。
<template>
<!-- storeToRefs后的直接写 不用再countStore.xxx-->
<h1>{{ count }}</h1>
</template>
<script setup>
import { useCountStore } from "../store/count.ts"
// 引入pinia的storeToRefs方法
import {storeToRefs} from "pinia"
let countStore = useCountStore()
// 其实storeToRefs方法就是类似解构
let {count} = storeToRefs(countStore)
console.log(count, "解构后就直接在模板写count即可")
</script>
本文首发于公众号【雪天前端】,欢迎关注!!