安装

yarn add pinia
# 或者使用 npm
npm install pinia

使用

创建 store

新建 store / index.ts

import {defineStore} from "pinia"
export const useXxxStore = defineStore("TEST",{
  state:()=>{
    return { // 初始化状态值
      name:"zhangsan",
      age:18
    }
  },
  getters:{ // 在不改变源数据的前提下可对数据进行加工, 等同于计算属性
    asName(state){
      return state.name+"泰库辣"
    }
  },
  actions:{ // 修改 state 中的值,同时支持同步和异步
    setName(){
      this.age++
    }
  }
})
​

在 pinia 中每声明一个store相当于一个独立的模块

全局注册pinia

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

使用 store 中的数据

<template>
    <h1>{{xxx.name}} {{xxx.age}} {{xxx.asName}}</h1>
    <button @click="handelClick">click</button>
</template>
<script setup lange="ts">
import {useXxxStore} from "./store/index.ts"
const xxx = useXxxStore();
const handelClick = ()=>{
    xxx.setName();
}
</script>