1.Pinia简介
Pinia是Vue3.0生态里Vuex的代替者,一个全新Vue的状态管理库。
2.Pinia与VueX相比的优势
- 可以对Vue2和Vue3做到很好的支持,对项目的Vue版本没有强制的要求(旧项目也可以使用)
- 抛弃了Mutations的操作,只有state、getters和actions,极大的简化了状态管理库的使用。
- 不需要嵌套模块,符合Vue3的Composition api ,让代码更加扁平化。
- .完整的TypeScript支持。
- .可以实现很好的代码自动分割,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中数据的方式
- 直接通过store调用
- 通过$patch修改store中的数据
- 通过$patch 中的箭头函数修改(这时候的state就是store仓库里的state,所以我们可以直接在函数里改变任何状态数据的值)
- 通过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>