Pinia
-
概念：一个跨组件/页面共享状态的Vue存储库（Vuex5版本）
-
优点：
- Vue2 和 Vue3 都支持
- Pinia 中只有 state、getter、action
- 良好的 TypeScript 支持
- Pinia 中每个 store 都是独立的，互相不影响
- 体积非常小，只有 1kb 左右
- Pinia支持插件来扩展自身功能
- 支持服务端渲染
1、安装：yarn add pinia
2、将pinia挂载到Vue应用中（全局jS/ts中）
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");
3、创建store
ps：使用 pinia 提供的 defineStore() 方法来创建一个 store ，该 store 用来存放我们需要全局使用的数据。
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('store的名字', {
// 其它配置项
})
4、使用store
ps：直接引入我们声明的useUsersStore 方法即可
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
console.log(store);
</script>
5、添加state
defineStore 函数创建了一个store，该函数第二个参数是一个options配置项，我们需要存放的数据就放在options对象中的state属性内。
state接收的是一个箭头函数返回的值，它不能直接接收一个对象
export const useUsersStore = defineStore("users", {
state: () => {
return {
name: "小猪课堂",
age: 25,
sex: "男",
};
},
})
6、操作 state
6.1、读取state（其他组件使用写法一样）
import { useUsersStore } from "../src/store/user";
// 使用pinia的storeToRefs函数，将state中的数据变为响应式
import { storeToRefs } from 'pinia';
const store = useUsersStore();
// 读取state
const { name, age, sex } = storeToRefs(store);
6.2、修改state的数据
ps：使用pinia的 storeToRefs 函数，将state中的数据变为响应式
<template>
<p>姓名：{{ name }}</p>
<p>年龄：{{ age }}</p>
<p>性别：{{ sex }}</p>
<button @click="changeName">更改姓名</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
// 更改姓名
const changeName = () => {
store.name = "张三";
console.log(store);
};
</script>
6.3、重置state
ps：调用store的 $reset() 方法
<button @click="reset">重置store</button>
// 重置store
const reset = () => {
store.$reset();
};
6.4、批量更改state数据
ps：调用store的 $patch 方法
<button @click="patchStore">批量修改数据</button>
// 批量修改数据
const patchStore = () => {
store.$patch({
name: "张三",
age: 100,
sex: "女",
});
};
6.5、直接替换整个state
ps：使用store的 $state 方法
store.$state = { counter: 666, name: '张三' }
7、getters
概念：getters 是 defineStore参数配置项里面的另一个属性，和Vue中的计算属性类似。
export const useUsersStore = defineStore("users", {
state: () => {
return {
name: "小猪课堂",
age: 25,
sex: "男",
};
},
getters: {
getAddAge: (state) => {
return state.age + 100;
},
getNameAndAge(): string {
return this.name + this.getAddAge; // 调用其它getter
},
},
});
7.1、getter传参
getters: {
getAddAge: (state) => {
return (num) => state.age + num;
},
},
调用：<p>新年龄：{{ store.getAddAge(1100) }}</p>
8、actions
ps：actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法，主要处理业务逻辑。
8.1、添加action
actions: {
saveName(name: string) {
this.name = name;
},
},
8.2、调用action
const saveName = () => {
store.saveName("我是小猪");
};
9、Pinia分模块
在pinia中一个ji / ts文件就是一个模块。
10、Pinia持久化存储
下载插件
npm i pinia-plugin-persist --save
全局配置
// main.ts
import { createPinia } from 'pinia'
// pinia持久化存储插件
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'
const pinia = createPinia();
// 将持久化存储挂载到pinia
pinia.use(piniaPluginPersist)
createApp(App).use(pinia).mount('#app')
使用
import { defineStore } from "pinia";
export const useStore = defineStore('storeId', {
state() {
return {
num: 0,
name: '张三',
age: 20
}
},
getters: { },
actions: { },
persist: {
// 开启持久化存储，默认是sessionStorage
enabled: true,
strategies: [{
// 持久化存储的key值
key: 'myStore',
// 配置为localStorage
storage: localStorage,
// 局部持久化，将需要持久化的数据加入到数组
paths:['name']
}]
}
})
11、Pinia总结 - 三大点
- state - 存储数据
- getters - 处理数据
- actions - 处理业务逻辑，同步异步都支持
