如果你正在阅读这篇文章，那么我可以猜测你是一个对Pinia很感兴趣的人。或者你只是想看看这个奇怪的单词到底是什么东西。无论你是哪种情况，我都很高兴你能来到这里。现在，让我们一起来探索一下这个神奇的Vue状态管理库吧！，在学习的过程中也看到了

1、pinia 是什么

官方地址：pinia.vuejs.org/zh/introduc…

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态

如果你不懂vue可以不必看了，这个只是一个使用说明

2、安装pinia

官网看到的命令，直接用。

npm install pinia

3、配置pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
//    这里使用pinia
const pinia = createPinia()
const app = createApp(App)
 
app.use(pinia)
app.mount('#app')

4、使用pinia

对于新手来说，不用搞清楚原理，先上手再说

1、创建store

store可以直接理解为一个map，保存了所有的数据，是全局唯一实例的，（反正我是这么理解的）

storeId 是key，保证全局唯一

import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore("users", {
    state: () => {
        return {
            name: "香菜",
            sex: "男",
        };
    },
});

2、使用store

<template>
  <div>
    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{sex}}</p>
    <button @click="changeName"> changeName</button>
  </div>
</template>
 
<script setup>
  import {useUsersStore} from "../api/user.ts";
  import {storeToRefs} from "pinia";
  import {usePlayStore} from "../api/player.ts";
 
  const  store = useUsersStore();
  const  playerStore = usePlayStore();
  const { name, age, sex } = storeToRefs(store);
  console.log(store)
 
  function changeName(){
    store.age = 19;
  }
</script>

这里有几个知识点

1> store在使用之前需要实例化，实例化多次也只有一个

2> 如果想使用响应在结构的时候需要使用 storeToRefs

3> store内置的函数$开头

4>批量修改可以使用$patch

5> chrome 可以查看实例化

5、总结

让我来给这篇文章来个幽默的总结吧！如果你现在还不知道Pinia是什么，那么我只能说你已经out到没朋友了。不过，别担心，现在你已经了解了这个神奇的Vue状态管理库，你就可以和你的小伙伴们炫耀一下了。当然，如果你还没有小伙伴，那么我只能说，Pinia也许无法帮你解决这个问题，但至少它可以帮你管理你的Vue组件状态，让你的开发工作更加高效。总之，Pinia就是你的好朋友，它会在你最需要的时候出现，帮助你解决问题。所以，如果你还没有尝试过Pinia，那么现在就去试试吧！说不定，它会成为你最好的开发伙伴呢！

pinia入门-学习笔记