Pinia的作用
作用
Pinia 是 Vue.js 的轻量级状态管理库，他可以在组件和页面间共享状态。
相关链接
官方网站：https://pinia.vuejs.org/
中文文档: https://pinia.web3doc.top/introduction.html
使用它的原因
- Vuex的官方强烈推荐新新项目用Pinia。
- Pinia 的 API 设计非常接近 Vuex 5 的提案。
- pinia相比vuex4，对于vue3的pinia的api更友好。
- pinia相比vuex4，具备完善的 类型推荐 ，对 TS 支持很友好。
- Vue开发者工具支持pinia。
pinia集成
- 安装依赖 yarn add pinia or npm i pinia;
- 在main.js中创建pinia const pinia = createPinia()；
- 将创建好的pinia应用到app中；
- 定义store;
创建单个store的步骤
1. 创建store/user.js
2. const userStore = defineStore("storeId"，{
state:()=>{return {}},
actions:{},
getters:{}
})；
### 配置对象有state，getters, actions
3. 导出userStore
- 创建store, 页面或组件中导入定义好的业务store，并调用userStore()。
（1）在main.js
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
（2）store/userStore.js
import { defineStore } from "pinia";
const useUserStore = defineStore('userStore', {
state: ()=> {
return {
userName: 'heihei',
}
},
actions: ()=>{
},
getters: ()=>{
}
})
export default useUserStore;
(3) 在组件中使用
<script setup>
import { useRoute } from 'vue-router';
import useUserStore from '../store/uerStore';
const userStore = useUserStore();
</script>
<template>
Home
</template>
actions的使用
前置条件
在pinia中没有mutations，只有actions，不管是同步还是异步的操作，都可以在actions中定义。
步骤
定义同步方法
- 在actions中定义方法
- 操作数据
- 在视图template中使用方法
定义异步方法：同上
实例代码
（1）在userSotre的actions中提供方法并且修改数据
import { defineStore } from "pinia";
const useUserStore = defineStore('userStore', {
state: () => {
return {
userName: 'heihei',
age: 18
}
},
actions: {
increment() {
this.age++
},
incrementAsync() {
setTimeout(() => {
this.age++
}, 1000)
}
},
getters: {
}
})
export default useUserStore;
（2）在Home组件中使用
<script setup>
import { useRoute } from 'vue-router';
import useUserStore from '../store/uerStore';
const userStore = useUserStore();
</script>
<template>
Home
{{userStore.age}}
<button @click="userStore.increment">+1</button>
<button @click="userStore.incrementAsync">异步+1</button>
</template>
总结
- 在actions 中可以定义同步异步方法
- actions中的方法直接修改数据this.数据名
- 在template中使用方法 （store的变量名.方法名）
getters的使用
作用
pinia中的getters和vuex中的基本是一样的，计算state的状态值。
步骤
- 在getters 中计算方法
- getters中的方法直接操作数据（this.数据名）
- 在template中使用 （store的变量名.方法名）
实例代码
（1）在getters中提供计算属性
import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
state: () => {
return {
count: 0,
}
},
getters: {
double() {
return this.count * 2
},
},
actions: {
increment() {
this.count++
},
incrementAsync() {
setTimeout(() => {
this.count++
}, 1000)
},
},
})
export default useCounterStore
(2)在组件中使用
<h1>根组件---{{ counter.count }}</h1>
<h3>{{ counter.double }}</h3>
总结
- 在getters中定义计算方法，
- 方法中操作数据并返回
- 在视图中使用计算值
storeToRefs的使用
前置条件
如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的
import useAccountStore from '../store/account';
import useUserStore from '../store/uerStore';
const userStore = useUserStore();
const { age} = storeToRefs(userStore);
</script>
<template>
Home
<div>{{age}}</div>
{{ userStore.age }} ---{{ userStore.descAge }}
<button @click="userStore.increment">+1</button>
<button @click="userStore.incrementAsync">-1</button>
</template>
总结
使用storeToRefs可以保证解构出来的数据也是响应式的
store间的取值
步骤
- 创建另一个store, useAccountStore ;
- 在useUserStore中导入useAccoutStore
- 在useUserStore中使用useAccoutStore 的数据和方法
实例代码
useAccountSore
import { defineStore } from "pinia";
const useAccountStore = defineStore('account',{
state:()=>{
return{
accountNumber: '123456',
money: 1000000
}
},
actions:{
addMoney(){
this.money+=100;
}
}
})
export default useAccountStore;
useUserStore
import { defineStore } from "pinia";
import useAccountStore from "./account";
const useUserStore = defineStore('userStore', {
state: () => {
return {
userName: 'heihei',
age: 18
}
},
actions: {
increment(){
this.age +=1;
},
incrementAsync(){
setTimeout(()=>{
this.age -= 1
},1000)
},
addMoney(){
const account = useAccountStore();
account.addMoney();
console.log(account.money)
}
},
getters: {
descAge(){
return this.age - 10;
}
}
})
export default useUserStore;
总结
导入另一个store,直接用xxxxstore名.的方式操作数据或方法
pinia模块化
前置条件
在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合
步骤
- 创建store/index文件；
- 在index.js中将给store导入；
- 添加统一导出useStore方法
（1）新建store/user.js文件
import { defineStore } from 'pinia'
const useUserStore = defineStore('user', {
state: () => {
return {
name: 'zs',
age: 100,
}
},
})
export default useUserStore
(2)新建store/index.js
import useUserStore from './user'
import useCounterStore from './counter'
// 统一导出useStore方法
export default function useStore() {
return {
user: useUserStore(),
counter: useCounterStore(),
}
}
（3）在组件中使用
<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>
Pina 和 vuex的比较
Pinia API 与 Vuex ≤4 有很大不同，即
- mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
- 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
- 不再需要注入、导入函数、调用函数、享受自动完成功能！
- 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
- 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
- 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。
