Pinia数据仓库
vuex数据仓库： vuex3.0适用于vue2.0，vuex4.0适用于vue3.0和2.0
而 Pinia 适用于3.0 也兼容2.0 主要是给3.0的组合式API设计的
Pinia的官方中文网: https://pinia./，有兴趣的可以自己去看看哦
先安装 Pinia 数据仓库
npm install pinia
安装好后我们就可以来建数据库，然后页面使用了
我们先来建一个数据库
defineStore的第一个参数就是这个store的名字，是一个独一无二的名字，是必传项，该store的唯一id
第二个参数就是数据
import { defineStore } from 'pinia'
export const useCar=defineStore("car",{
state: () =>{
return {
msg:"carhello 仓库的数据",
car:"打印car函数"
}
},
})
接下里我们就来取数据显示在页面上去
记得要先引入仓库
<template>
<div>
box1---{{}}
</div>
</template>
<script setup>
// 引入了useCar的数据仓库，可以使用就可以 useCar 的数据
import {useCar} from "../store/"
let cardata=useCar()
console.log(cardata.car);
</script>
<style>
</style>
Pinia 修改仓库里的数据
一共有三种方法都可以修改仓库里的数据
第一种，直接修改
import { defineStore } from 'pinia'
export const useCar=defineStore("car",{
state: () =>{
return {
msg:"carhello 仓库的数据",
car:"打印car函数",
n:20
}
},
})
这里需要注意一点：如果取值出来的显示在页面上的后面就不会刷新了，因为取值是静态的，只能取一次，所以页面就不会在刷新
<template>
<div>
box---{{}} <br><br>
<button @click="change1">box修改仓库</button><br><br>
<p>{{a}}</p>
</div>
</template>
<script setup>
import {useCar} from "../store/"
let store=useCar()
// 如果取值出来的显示在页面上的后面就不会刷新了，因为取值是静态的，只能取一次，所以页面就不会在刷新
let a = store.msg
let change1=()=>{
store.msg="66666修改了"
}
</script>
注意：解构之后修改是不行的,因为解构后msg为非响应式变量和toRefs是一样的
import {toRefs} from "vue"
import useStore from "../store/"
let store=useStore()
let {msg}=toRefs(store)
let fn=()=>{msg.value="6666修改成功啦"}
第二种，批量修改$patch
使用 $patch 和我们自己去一条一条修改数据看起来没什么不同，但其实使用 $patch 性能更好一些，因为它的底层进行了优化的
可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
import {defineStore} from "pinia"
let user=defineStore("user",{
state() {
return{
count:20,
price:100
}
}
})
export default user;
<template>
<div>
<h1>page3</h1>
<p>{{}}---{{}}</p>
<button @click="change1">批量修改</button>
<button @click="look">look</button>
</div>
</template>
<script setup>
import {toRefs} from "vue"
import MyStore from "../store/"
let store=MyStore()
console.log(store.count,store.price)
function change1 () {
store.$patch(()=>{
store.count++
store.price++
})
}
function look () {
console.log(store.count,store.price);
}
</script>
第三种，统一修改Actions
Actions：在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)
之所以提供这个功能 就是为了项目中的公共修改状态的业务统一
Getter 完全等同于 Store 状态的 计算值
它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用
虽然鼓励但是依然提供了非es6的使用方式 内部可以用this代表state
import {
defineStore
} from "pinia";
export const useBook = defineStore("car", {
state: () => {
return {
msg: "useBook仓库数据",
birth: "1997-02-03"
}
},
// Getter 完全等同于 Store 状态的 计算值
getters: {
age: (state) => {
console.log("打印年龄");
return new Data().getFullYear() - new Data(state).getFullYear()
}
},
actions: {
//1.可以异步函数的回调中修改仓库
//2.统一修改
tool() {
console.log("打印1111");
this.msg = "666"
}
}
})
<template>
<div>
<h1>p4</h1>
<p>{{}}</p>
<p>{{}}</p>
<p>{{}}</p>
<button @click="fn">Tool</button>
</div>
</template>
<script setup>
import {useBook} from "../store/"
let store=useBook()
console.log(store.age)
let fn=()=>{
store.tool()
}
</script>
重置
重置：就是将仓库里面的值恢复成初始值的一个方法
其实很简单哒
仓库还是用的上面的那个仓库，这里就不在展示仓库代码了
<template>
<div>
<h1>page2</h1>
<p>{{msg}}</p>
<button @click="change1">change1</button>
<button @click="look">look</button>
<button @click="reset1">reset1</button>
</div>
</template>
<script setup>
import {toRefs} from "vue"
import {useCar} from "../store/"
let cardata=useCar()
let {msg}=toRefs(cardata)
let change1=()=>{
cardata.msg="6666"
}
let look=()=>{
console.log(msg.value)
}
let reset1=()=>{
cardata.$reset()
}
</script>
模块化思想
一个文件一个小仓库,仓库之间可以相互访问数据 不同组件也可以访问任意小仓库数据
export const car = defineStore('car', {
state: () => ({
counter: 0,
}),
actions: {
}
})
export const userinfo = defineStore('userinfo', {
state: () => ({
counter: 0,
}),
actions: {
fn(state){state.counter=100}
}
})
A组件可以用car,userinfo两个仓库的数据
import {car} from "@/store/"
import {userinfo} from "@/store/"
let store1=car()
store1.counter
let store2=userinfo()
store2.counter
car仓库使用userinfo仓库跟组件一样的使用方式
import {userinfo} from "@/store/"
let store2=userinfo()
store2.counter
store2.fn()