vue-pinia

Vue-Pinia

1. 基本介绍

pinia 是一个状态管理工具，Vue 的专属状态管理库，它允许你 跨组件 或⻚⾯ 共享状态。

• 不同组件数据 保持同步

• 数据的修改都是 可追踪的

2. 基本使用

1️⃣ 下载 pinia。

npm install pinia
yarn add pinia

2️⃣ 创建 pinia 实例并注册。

// main.js
import { createApp } from 'vue'
import { creaePinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')

3️⃣ 定义仓库，创建 src/store/name.js 模块，用来管理相应的共享数据。

import { defineStore } from 'pinia'
export const useNameStore = defineStore(arg1 , arg2)

• 可以任意命名 defineStore() 的返回值，但建议使用 store 的名字，并以 use 开头且以 Store 结尾。

• arg1：字符串类型，被用作 id，要求是一个独一无二的名称。

• arg2：setup 函数或 option 对象。

  1. option对象（选项式API）：

     import { defineStore } from 'pinia'
     // 定义⼀个名为 stock的store 并导出
     export const useStockStore = defineStore('stock', {// 共享数据state: () => ({stock: 20,// ...}),// 基于共享数据的计算属性getters: {// 计算库存的两倍doubleStock: (state) => state.stock * 2,// ...},// 修改共享数据的⽅法actions: {// 增加库存addStock() {this.stock++},// 减少库存subStock() {this.stock--},// ...}
     }
     

     • state：store 的数据 (data)

     • getters：store 的计算属性 (computed)

     • actions： store 的方法 (methods)

  2. setup函数（组合式API）：

     import { defineStore } from 'pinia'
     import { ref, computed } from 'vue'
     // 定义⼀个名为 stock的store 并导出
     export const useStockStore = defineStore('stock', () => {// 初始化库存数据const stock = ref(20)// 计算库存的两倍const doubleStock = computed(() => {return stock.value * 2})// 增加const addStock = () => {stock.value++} // 减少const subStock = () => {stock.value--} // 返回共享数据和操作函数return {stock,doubleStock,addStock,subStock}
     }
     

     • ref() 就是 state 属性

     • computed() 就是 getters 属性

     • function() 就是 actions 属性

4️⃣ 使用仓库。

<script setup>
// 导入库存仓库
import { useStockStore } from '@/store/stock.js'
// 创建库存仓库
const stockStore = useStockStore()
</script>
<template><div><p>已知库存数: {{ stockStore.stock }}</p><button @click="stockStore.addStock()">库存+1</button><button @click="stockStore.subStock()">库存-1</button><button @click="stockStore.doubleStock()">库存*2</button></div>
</template>