pinia

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安装使用