数据仓库Pinia

1.下载仓库（npm install pinia）

2.创建一个 pinia（根存储）并将其传递给应用程序：

import { createPinia } from 'pinia'

let app=createApp(App)

app.use(createPinia())

3.创建需要的仓库，使用 defineStore() 创建store，并且它需要一个唯一名称，作为第一个参数传递，并将仓库导出

import { defineStore } from 'pinia'
//导出仓库的两种方法1
export const useCar = defineStore("car", {
	state: () => {
		return { msg: "carhello 仓库的数据" }
	}})
//导出仓库的两种方法2
 const useCar = defineStore("car", {
	state: () => {
		return { msg: "carhello 仓库的数据" }
	}})
export default useCar ;

4.使用仓库

<script setup>
// 所有组件都可以使用仓库
// 引入仓库
import { useCar } from "../store/car";
// 实例化仓库
let Boxcar = useCar();
// 使用仓库
console.log(Boxcar.age);
</script>
<template>
  <div>
    我是BOx1组件中的内容
    <p @click="fn">{{ Boxcar.msg }}</p>
  </div>
</template>

改变仓库数据的方式1：通过直接对仓库数据进行修改，因为仓库数据是响应式的，使用所有使用该数据的组件或者标签都会改变

<script setup>
import { useCar } from "../store/car";
import { ref } from "vue";
let a = ref("变");
let store = useCar();

let fn = () => {
  a.value = store.msg;
  console.log(store.msg);
};
// 仓库数据是响应式的 修改仓库数据后使用仓库的数据都会响应式修改
let fm1 = () => {
  store.msg = "store.msg修改了仓库数据";
  console.log(store.msg);
};
</script>
<template>
  <div>
    <h1>page1</h1>
    <p>{{ a }}</p>
    <button @click="fn">点击获取数据</button>
    <button @click="fm1">psge1组件修改仓库数据</button>
  </div>
</template>

<style></style>

改变仓库数据的方式2：将仓库数据解构赋值后通过toRefs或者toRef改变成响应式数据

<script setup>
import { useCar } from "../store/car";
import { toRefs, toRef } from "vue";
let Page2Car = useCar();
// 解构赋值 注意这里的msg不是响应式数据
// let { msg } = Page2Car;
// 等同于 let msg=ref(Page2Car.msg)
// 使用torefs
// let { msg } = toRefs(Page2Car);
// 使用toref
let msg = toRef(Page2Car, "msg");
let fn = () => {
  msg.value = "解构赋值然后修改仓库数据";
};

</script>
<template>
  <div>
    <h1>page2</h1>
    <p>{{ Page2Car.msg }}</p>
    <button @click="fn">psge2组件修改仓库数据</button><br />
  </div>
</template>

<style></style>

批量修改仓库数据：

<script setup>
// export default 导出的仓库名引入不加{}
import a from "../store/user.js";
let Page3User = a();
// console.log(Page3User);
// 批量修改 仓库调用$patch方法
let fn = () => {
  Page3User.$patch({
    count: 30,
    price: 40,
  });
};
// 批量修改第二种方法 给patch传一个函数
let fm = () => {
  Page3User.$patch(() => {
    Page3User.count++, Page3User.price++;
  });
};
// $subscribe state就是修改后的值
Page3User.$subscribe((n1, state) => {
  console.log("仓库修改就会运行", state, n1);
});
</script>
<template>
  <div>
    <h1>page3</h1>
    <p>{{ Page3User.count }}---{{ Page3User.price }}</p>
    <button @click="fn">psge3组件批量修改仓库数据</button><br />
    <button @click="fm">psge3组件批量修改仓库数据</button>
  </div>
</template>

<style></style>

重置仓库数据

let fm = () => {
  Page2Car.$reset();
};

getters：Getter 完全等同于 Store 状态的 计算值(相关值不变不会重新运行，取缓存中的值)。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用,state代表this

actions：它可以异步同步的统一修改状态，之所以提供这个功能 就是为了项目中的公共修改状态的业务统一

使用：

import { defineStore } from 'pinia'

export const useCar = defineStore("car", {
	state: () => {
		return { msg: "carhello 仓库的数据" }
	},
	getters: {
		age: (state) => {
			return state.msg = "688888"
		}
	},
	// 使用直接调函数
	actions: {
		tool(state) {
			// 用this修改
			this.msg = "actions"

		}
	}
})