Pinia 数据仓库配置之建仓库，使用仓库数据，Pinia 三种方法来修改仓库里的数据（直接修改，$patch，Actions），模块化思想

Pinia数据仓库

vuex数据仓库： vuex3.0适用于vue2.0，vuex4.0适用于vue3.0和2.0

而 Pinia 适用于3.0 也兼容2.0 主要是给3.0的组合式API设计的

Pinia的官方中文网: https://pinia.web3doc.top/，有兴趣的可以自己去看看哦

先安装 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---{{cardata.msg}}
	</div>
	
</template>

<script setup>
	// 引入了useCar的数据仓库，可以使用就可以 useCar 的数据
	import {useCar} from "../store/car.js"
	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---{{store.msg}} <br><br>
		<button @click="change1">box修改仓库</button><br><br>
		<p>{{a}}</p>
	</div>
</template>

<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	// 如果取值出来的显示在页面上的后面就不会刷新了，因为取值是静态的，只能取一次，所以页面就不会在刷新
	let a = store.msg
	let change1=()=>{
		store.msg="66666修改了"
	}
</script>

注意：解构之后修改是不行的,因为解构后msg为非响应式变量和toRefs是一样的

import {toRefs} from "vue"
import useStore from "../store/Box.js"
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>{{store.count}}---{{store.price}}</p>
		<button @click="change1">批量修改</button>
		<button @click="look">look</button>
	</div>
</template>

<script setup>
	import {toRefs} from "vue"	
	import MyStore from "../store/user.js"
	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>{{store.msg}}</p>
		<p>{{store.birth}}</p>
		<p>{{store.age}}</p>
		<button @click="fn">Tool</button>
	</div>
</template>

<script setup>
	import {useBook} from "../store/book.js"
	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/car.js"
	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/car.js"
import {userinfo} from "@/store/userinfo.js"
let store1=car()
store1.counter
let store2=userinfo()
store2.counter

car仓库使用userinfo仓库跟组件一样的使用方式

import {userinfo} from "@/store/userinfo.js"
let store2=userinfo()
store2.counter
store2.fn()