vue3 之 Pinia

Pinia

• 一个拥有组合式 API 的 Vue 状态管理库
• Vue 的专属状态管理库，它允许你跨组件或页面共享状态
• 同时支持 Vue 2 和 Vue 3
• mutation 被弃用
• 支持TypeScript，无需创建复杂的包装器
• 支持动态注册store
• 嵌套结构的模块不再用
• 不再有可命名的模块，Store 扁平的架构设计

示例

定义：
// stores/userStore.js  
import { defineStore } from 'pinia';  
  
export const useUserStore = defineStore('user', {  
  state: () => ({  
    name: 'Guest',  
    age: 0,  
  }),  
  getters: {  
    fullName: (state) => {  
      return `${state.name}, ${state.age} years old`;  
    },  
  },  
  actions: {  
    updateName(name) {  
      this.name = name;  
    },  
    updateAge(age) {  
      this.age = age;  
    },  
  },  
});

使用：
<template>  
  <div>  
    <p>Name: {{ user.name }}</p>  
    <p>Age: {{ user.age }}</p>  
    <p>Full Name: {{ user.fullName }}</p>  
    <button @click="updateUserName('New Name')">Update Name</button>  
    <button @click="updateUserAge(30)">Update Age</button>  
  </div>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
import { useUserStore } from '@/stores/userStore';  
  
const user = useUserStore();  
  
const updateUserName = (name) => {  
  user.updateName(name);  
};  
  
const updateUserAge = (age) => {  
  user.updateAge(age);  
};  
</script>