https://juejin.cn/post/7216161682145116197#heading-24
安装
pinianpm install pinia -S
创建
pinia 实例并挂载到 vue中// main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
// 创建 Pinia 实例
const pinia = createPinia()
// 创建 Vue 实例
const app = createApp(App)
// 挂载到 Vue 根实例
app.use(pinia)
app.mount('#app')
创建
storestore简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。我们需要使用
pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。首先在项目
src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。import { defineStore } from "pinia";
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore("users", { // 此处的users就是id，{}中的就是options
state: () => {
return {
name: "mumu",
age: 22,
sex: "男",
};
},
getters: {
getAddAge: (state) => {
return (num: number) => state.age + num;
},
getNameAndAge(): string {
return this.name + this.getAddAge; // 调用其它getter
},
},
actions: {
saveName(name: string) {
this.name = name;
},
},
});
创建
store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：-
name：一个字符串，必传项，该store的唯一id。 -
options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
我们可以定义任意数量的
store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。使用store
使用
store很简单，直接引入我们声明的useUsersStore 方法即可<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
console.log(store);
</script>
添加state
store是用来存放公共数据的，数据具体存在options对象中的state属性内。state接收的是一个箭头函数返回的值，它不能直接接收一个对象。读取state数据
<template>
<p>姓名：{{ name }}</p>
<p>年龄：{{ age }}</p>
<p>性别：{{ sex }}</p>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const name = ref<string>(store.name);
const age = ref<number>(store.age);
const sex = ref<string>(store.sex);
</script>
修改state数据
想要修改
store中的数据，可以直接重新赋值即可<template>
<button @click="changeName">更改姓名</button></template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const { name, age, sex } = store;
const changeName = () => {
store.name = "张三";
console.log(store);
};
</script>