Vue2项目中，Vuex状态管理工具，几乎可以说是必不可少的了。而在Vu3中，尤大大推荐我们使用pinia（拍你啊）进行状态管理，咱得听话，用就完了。使用之前我们来看一下，使用 pinia 给我们带来哪些好处?
官网介绍：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
个人理解：在我看来就是变态版 vuex，听说是为了尊重原作者，所以给改名了叫 pinia（拍你啊）

看看都有啥变态的:
1.兼容 vue2、vue3，该说不说这一点 vuex 也支持
2.Typescript 支持更友好
3.体积小，1kb 左右，vuex 350k 以上
4.支持插件扩展和服务器端渲染 ssr
5.pinia 只有 state、getter、action，抛弃了 Vuex 中的 Mutation。
6.pinia 中 action 支持同步和异步。上面也说了下为啥，还不知道为啥可以搜一下为啥。
7.不用创建各个模块嵌套了。Vuex 中才分不同模块我们需要用到 modules：模块化拆分。在 pinia 中每个 store 都是独立的，互相不影响，没啥事。

用 vue3 demo 讲解 pinia 的使用

一、搭建项目、安装以来
Vue3 + TS + Vite 项目
参考：Vue3.x 全家桶+vite+TS-搭建 Vue3.x 项目
参考：vue3 学习

1). 创建项目

npm create vite@latest my-vite-app --template vue-ts

2). 安装 pinia 依赖

npm install pinia

3).全局挂在 pinia
我们在 main.ts 主文件中，引入 pinia 的createPinia 方法， 创建根存储，以方便全局调用。

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");

二、搞正事，创建数据仓库 store
应用场景：
. 多个视图依赖于同一状态。
. 来自不同视图的行为需要变更同一状态。
我们需要用到 pinia 的defineStore() 方法，创建一个 store。
defineStore：
参数 1：(name) store 的唯一标识 id。也就是 vuex 中 modules：模块化拆分的模块标识
参数 2：(options) 相关配置，通俗来讲就是数据，和修改数据的一系列方法 state、getter、action 都在这里
创建后编写代码如下：

/src/store/piniaStore.ts

import { defineStore } from 'pinia'
export const useUsersStore = defineStore('pinia_id', {
})

三、组件中调用 pinia
我们在上一步已经引入了 pinia，并且在 store 文件下创建了一个叫 piniaStore 的 store，接下来让我们看看在组件里如何调用

<script setup lang="ts">
    import { useUsersStore } from "../src/store/piniaStore";
    const store = useUsersStore();
    console.log(store);
</script>

方法很简单一个 useUsersStore 方法搞定，我们看一下打印内容：

$dispose: f $dispose()$id: "pinia_id"
$onAction: f ()
$patch: f $patch(partialStateOrMutator)
$reset: f Sreset()
$subscribe: Ssubscribe(callback, options2 = )  const removeSubscription = addSuoscription(suhotUpdate: (newStore) => f...]

也就这些哈，没啥玩楞。
四、state 属性
我们往 store 里加点数据源 state 吧！

//堆代码 duidaima.com
export const useUsersStore = defineStore("pinia_id", {
  state: () => {
    return {
      age: 20,
      message:'我来存放公共数据哈！'
      sex: "男",
    };
  },
});

4.1 读取 state 数据
回想一下 vuex 怎么访问的
组件中访问 State 中数据的第一种方式:
this.$store.state.全局数据名称
组件中访问 State 中数据的第二种方式:
// 从vuex中按需导入mapState函数

import { mapState } from 'vuex'

// 将全局数据 因设为当前组件的计算属性

computed: {
    ...mapState(['count'])
}

pinia 如何访问呢？
其实我们定义的 state 数据就在 useUsersStore 内，我们自行就可以直接拿到相关数据

<template>
  <p>描述：{{ message }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
    import { ref } from "vue";

    import { useUsersStore } from "../src/store/piniaStore";
    const store = useUsersStore();

    const message = ref<string>(store.message);
    const age = ref<number>(store.age);
    const sex = ref<string>(store.sex);
</script>

当然我们也可以用 es6 解构赋值来优化一下

const { message, age, sex } = store;

4.2 多个组件使用 state
我们使用 pinia 更想做到多组件公用统一数据，新建一个 Child.vue 其实用法很简单直接调用使用即可

<template>
  <p>我是一个子元素</p>
  <p>描述：{{ message }}</p>
  <p>年龄：{{ age }}</p>
  <p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import { useUsersStore } from "../src/store/piniaStore";
    const store = useUsersStore();
    const { message, age, sex } = store;
</script>

4.3 修改 state 数据
我们在回想一下 vuex 怎么修改的?
有人很暴力：直接 this.$store.state.全局数据名称 直接去修改，这种方式很难查看数据是被什么组件修改。
mutation 修改
① 只能通过 mutation 变更 store 数据,不可以直接操作 store 中的数据

② 通过这种方式虽然操作起来繁琐,但是可以集中监控所有数据的变化

看看 pinia
其实如果想要修改修改 store 中的数据，可以直接重新赋值

<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <p>年龄：{{ age }}</p>

  <button @click="changeAge">年龄不对</button>
</template>
<script setup lang="ts">
    import child from './child.vue';
    import { useUsersStore } from "../src/store/piniaStore";
    const store = useUsersStore();
    const { nage,} = store;
    const changeAge = () => {
        store.age = 26;
        console.log(store);
    };
</script>

打印可也看出。store 中 age 数据发生了改变，再看看，呦呵，页面没响应。我们可能去监听 store 数据变化然后刷新页面，但有个更好的方法等着我们pinia 的storeToRefs 方法把我们的 state 变得具有响应

import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { message, age, sex } = storeToRefs(store);

4.4 初始化/重置 state 数据
store 的$reset()方法为我们提供了 state 数据重置的可能

<button @click="onResetData">重置store</button>

const onResetData = () => {
  store.$reset();
};

4.5 store 的$patch 方法批量修改数据
全部调整：此方法需要一次性将 state 中的所有字段例举出。

 store.$patch({
    message: "批量搞事情",
    age: 100,
    sex: "女",
  });

部分修改: $patch 方法接收一个回调函数，用来修改部分数据

store.$patch((state) => {
  state.items.push({ message: 'shoes', quantity: 1 })
  state.hasChanged = true
})

4.6 直接替换 state
store.$state = { counter: 666, name: 'yup' }
五、getter 属性
Getter 用于对 Store 中的数据进行加工处理形成新的数据，Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性,不会影响到原本的数据，Store 中的数据发生变化,Getter 的数据也会跟着变化。
5.1 添加 getter

export const useUsersStore = defineStore("pinia_id", {
  state: () => {
    return {

      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
  },
});

5.2 调用 getter
直接在标签上使用 getter 定义的方法，这种方式是响应式的，可以直接监听到变化，其实 state 标签直接调用也是一样相应的

<template>
  <p>新年龄：{{ store.getAddAge }}</p>
  <button @click="patchStore">批量修改数据</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
// 批量修改数据
const patchStore = () => {
  store.$patch({

    age: 100,
    sex: "女",
  });
};
</script>

getter 中调用其它 getter，这里需要注意一下，不要箭头函数

export const useUsersStore = defineStore("users", {
  state: () => {
    return {

      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

5.3 getter 传参
上文提到 getter 与计算属性差不多，想想计算属性怎么传递的呢？

computed:{
    getNewName(){
        function (str){
            return str+this.name
        }
    }
}

看一下 getter 的

 <p>新年龄：{{ store.getAddAge(1100) }}</p>
 getters: {
    getAddAge: (state) => {
      return (num: number) => state.age + num;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },

六. actions 属性
对数据进行逻辑加工，完成默写特定的业务逻辑。和 vue 组件代码中的 methods 相似，存放一些处理业务逻辑的方法。
6.1 添加 actions

export const useUsersStore = defineStore("pinia_id", {
  state: () => {
    return {
      message: "",
      age: 25,
      sex: "男",
      name:'王'
    };
  },
  getters: {
    getAddAge: (state) => {
      return (num: number) => state.age + num;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
  actions: {
    saveName(name: string) {
      this.name = name;
    },
  },
});

6.2 使用 actions

const saveName = () => {
  store.saveName("我用来调用action内的方法");
};

至此文章结束！