Vue生态全新状态管理工具Pinia学习记录

1.Pinia简介

Pinia是Vue3.0生态里Vuex的代替者，一个全新Vue的状态管理库。

2.Pinia与VueX相比的优势

1. 可以对Vue2和Vue3做到很好的支持，对项目的Vue版本没有强制的要求（旧项目也可以使用）
2. 抛弃了Mutations的操作，只有state、getters和actions,极大的简化了状态管理库的使用。
3. 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
4. .完整的TypeScript支持。
5. .可以实现很好的代码自动分割,Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

着重说一下第二个优点，Pinia抛弃了传统Vuex的Mutations，大多人可能都有解说过别人的项目，当看到若干的mutation，以及mutation-types常量是不是有种头皮发麻的感觉，Pinia抛弃了Mutations的操作，大大的提升了项目的可维护。

3.实现

纸上得来终觉浅，绝知此事要躬行。废话不多说，直接上手。

1. 搭建Vue3.0环境（虽然Pinia支持2.0版本，但是我这里使用3.0版本）

2. 安装Pinia

代码如下：

//下载安装
		npm install Pinia 或者 yarn add Pinia
//在main.ts中引用并使用
		import { createApp } from "vue";
		import App from "./App.vue";
		import { createPinia } from "pinia";
		// Pinia创建实例
		const pinia = createPinia();
		// 创建Vue实例
		const app = createApp(App);
		app.use(pinia);
		app.mount("#app");

3.创建一个简单的store
在src文件夹下创建store目录，并在store目中中创建index.ts文件，创建简单的store，defineStore 这里和Vuex基本类似，需要传入两个参数，第一个参数时store的名称（类似id，必须是唯一不重复的），第二个参数是store的一些简单配置信息主要包含 state、getters、actions几大部分。

代码如下：

		import { defineStore } from "pinia";
		export const mainStore = defineStore("main", {
		state: () => {
			return {
				msg: "这是pinia的主要数据",
				};
			  },
			  getters: {
				
			  },
			  actions: {
				
			  },
			});

在组件中使用store中的数据

代码如下：

		<template>
			<h2>{{ msg }}</h2>
		</template>
		<script lang="ts" setup>
			import { mainStore } from "../store/index";
			import { storeToRefs } from "pinia";
			const store = mainStore();
			const { msg} = storeToRefs(store);
		</script>

4.操作store中数据的方式

1. 直接通过store调用
2. 通过$patch修改store中的数据
3. 通过$patch 中的箭头函数修改（这时候的state就是store仓库里的state，所以我们可以直接在函数里改变任何状态数据的值）
4. 通过actions修改数据

代码如下：

		<template>
			  <button @click="changeCount">修改数量(直接操作store)</button>
			  <button @click="editCount">修改数量($patch)</button>
			  <button @click="editCountFun">修改数量($patch+函数)</button>
			  <button @click="changeMsg">通过actions修改</button>
		</template>
		<script lang="ts" setup>
			import { mainStore } from "../store/index";
			const store = mainStore();
			
			//直接通过store调用
			const changeCount = () => {
			  store.count++;
			};
			//$patch修改
			const editCount = () => {
			  store.$patch({
				msg: store.msg === "jspang" ? "HelloWorld" : "哈哈变化了",
			  });
			};
			//$patch 中的箭头函数修改
			const editCountFun = () => {
			  store.$patch((state) => {
				state.msg = "xixix";
			  });
			};
			//actions 方式
			const changeMsg = ()=>{
				store.changeState()
			}
			</script>
			
			//store中的actions
			actions: {
				changeState() {
					this.count++;
					this.msg = "通过actions修改";
				},
			},

5.Getter使用
Pinia中的Getter和Vue中的计算属性几乎一样，就是在获取State的值时作一些处理，比如给商品价格增加单位，不在做过多解释。

代码如下：

getters: {
			addUnit(state) {
			  return `￥${state.money}`
			}
		},
		//使用
		<template>
		  <h2>{{ addUnit }}</h2>
		</template>
		<script lang="ts" setup>
		import { mainStore } from "../store/index";
		import { storeToRefs } from "pinia";
		const store = mainStore();
		const { addUnit } = storeToRefs(store);
		</script>