PiniaPinia是Vue3中一种常见的状态管理库。 Pinia的使用过程 npm install pinia -D

Pinia是Vue3中一种常见的状态管理库。

Pinia的使用过程

npm install pinia -D
在main.ts中创建pinia引入

import { createPinia } from "pinia";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);

新建一个pinia文件夹，创建一个id类

import { defineStore } from "pinia";
// 第一个参数是应用程序中 store 的唯一 id
export const idStore = defineStore("id", {
    // 其它配置项
    state: () => {
      return {
        id: null,
      };
    },
    getters:{
      getId(state){
        return state.id
      }
    },
    actions: {
      setId(id_){
        this.id = id_
      },
    },
  });

在其他文件中调用时

<template>
  <div>id:{{ id }}</div>
  <div>idStoreTo:{{ idStoreTo.id }}</div>
  <div>getters:{{ idStoreData.getId }}</div>
  <div @click="changeData">变化</div>
</template>

<script setup>

import { storeToRefs } from "pinia";
import { idStore } from "./pinia/id"

const idStoreData = idStore()
const id = idStoreData.id   //没有响应式
const idStoreTo = storeToRefs(idStoreData)  //有响应式
const changeData = () => {
  idStoreTo.id = 4   //不起作用
  idStoreData.id = 2 //不起作用
  idStoreData.setId(5)  //起作用
}

</script>

storeToRefs

可以给状态管理器增加响应式
id值只能通过action中的方法发生改变
随后getters中的方法和storeToRefs中的值也会发生界面，从而引发界面发生变化

与Vuex相对，Pinia有很多的优势

Pinia没有mutations，mutations一般都非常冗长
Pinia可以与TypeScript一起使用时具有可靠的类型判断支持，VueX对Ts的支持并不友好
Pinia不具有modules的嵌套结构，可以灵活使用每一个store,它们是通过扁平化的方式来相互使用
不会再有命名空间的概念，不需要记住他们的复杂关系

Vuex 中为什么不能直接修改 state

Vuex遵循严格的单向数据流原则，这意味着所有的状态变更都必须通过显式的提交来操作。这样设计的目标是为了更好地跟踪状态变化，便于调试和维护。

state是实时更新的，如果直接修改state中的数据是异步操作，当state异步还没有执行完，state的数据就有可能发生变化，会导致程序出问题，所以state要同步操作，通过mutations的方式限制了不允许异步。

Vuex具有modules嵌套结构。

Pinia中的action支持同步和异步操作。