pinia:
2.0.11. npm install pinia@2.0.11
架构设计
Pinia采用去中心化的架构,每个模块拥有自己的状态、mutations和actions,而Vuex采用集中式的架构,将所有的状态存储在一个单一的全局状态树中,通过mutations和actions来修改和处理状态。
类型支持。Pinia从设计之初就对TypeScript提供了原生的支持,提供了更好的类型推导和类型检查的支持,而Vuex需要使用额外的插件来实现TypeScript支持。
性能优化
Pinia在性能上进行了一些优化,采用了更快的响应式系统,并且支持了更高效的批量更新机制,而Vuex在性能方面的优化不如Pinia。
插件生态
Vuex是在Vue 2生态系统中广泛使用的状态管理库,因此它具有更丰富的插件生态系统,而Pinia作为相对较新的库,插件生态系统可能相对较小。
语法和使用
Pinia是为Vue 3设计的状态管理库,使用了新的Composition API,更加模块化,而Vuex则是为Vue 2设计的,使用了较旧的Options API。
适用场景。
Pinia更适合初学者和快速开发项目,而Vuex更适合复杂的项目和对状态管理有更高要求的开发者。
易用性
Pinia比Vuex更易用,因为它不需要编写复杂的action、mutation和getter函数。
兼容性
Pinia是为Vue 3设计的,而Vuex的最新版本支持Vue 3,但之前的版本是为Vue 2设计的
使用main.ts里面
import { createPinia } from "pinia"
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
src里面创建store文件夹,创建index.ts
import { defineStore } from "pinia";
export const mainStore = defineStore('main',{
state:()=>{
return {
helloWorld: 'Hello world!',
count: 0
}
},
getters:{},
actions:{}
})
创建一个button组件++
<template>
<div style="color:#333">
<button @click="handleClick">修改状态数据</button>
</div>
</template>
<script lang="ts" setup>
import {mainStore} from "../store/index";
const store = mainStore()
const handleClick = () => {
store.count++
}
</script>
<style >
</style>
App中引入
import {mainStore } from '../store/index'
<div>{{store.count}}</div> // 数据可以增加
<div>{{count}}</div> // 结构方式不能
<script setup lang="ts">
const store = mainStore()
const {count} = store
</script>
注意点:在页面中使用store.count是双向绑定可以++,在script里面结构的方式只能拿到一次
解决方案:storeToRefs
import {storeToRefs} from "pinia"
const store = mainStore()
const {count} = storeToRefs(store)
修改数据的4种方式
1.storeToRefs 见上面详解
2.$patch, 好处:可以多处修改.
store.$patch({
count: store.count + 2,
helloWorld: 'test123'
})
虽然下面也可以,但是官方明确$patch是经过优化的,适合多个数据同时改变
const handleClick = () => {
store.count++
store.helloWorld = '123
}
3.$patch传递函数,处理稍微复杂的业务
const handleClickMethod = ()=>{
store.$patch((state)=>{
state.count++;
state.helloWorld = "handleClickMethod"
})
}
4.使用store里面的actions定义函数changeState,处理更复杂的业务
页面调用直接store.changeState,也可以单独定义一个函数,store.changeState()放在里面
<button @click="store.changeState">修改状态数据4-action</button>
getters:具有缓存机制
phoneHidden(state){
console.log('Getters被调用了', '')
return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
}
页面多次调用getters也调用一次
<button @click="handleCLickChangePhone">修改电话号码</button>
<div>{{store.phone}}</div>
const handleCLickChangePhone = ()=>{
store.phone = '12345678912'
}
store中的互调
例如新建suStore.ts
import { defineStore } from "pinia";
export const suStore = defineStore('su',{
state:()=>{
return {
list:['小红','小美','大大']
}
}
})
index.ts中action使用
import { suStore } from "./su";
getList(){
console.log('getList', suStore().list)
}
页面中调用
store.getList()
vue-devtools安装使用