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>