Pinia如何進行狀態管理?

Pinia 是 Vue.js 的一款狀態管理庫,它是 Vuex 的替代方案(雖然 Vuex 依然可用,但 Pinia 在很多方面展現出了優勢),旨在為 Vue 開發者提供一種簡潔、直觀且功能強大的狀態管理方式。

以下是一個在 Vue 3 項目中使用 Pinia 進行狀態管理的基本實例,展示了其常見的使用步驟和方式:

1、安裝vue3環境

使用 npm安裝:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 pnpm:
pnpm create vite

然后按照實際需求一步一步操作,如下圖示例:


pinia安裝過程

2、安裝 Pinia
通過命令行安裝 Pinia:

npm install pinia
# 或者使用 yarn
yarn add pinia
  1. 在 Vue 項目中掛載 Pinia 實例
    main.ts(如果是使用 TypeScript 的項目)文件中掛載 Pinia,示例代碼如下:
// main.js
import { createApp } from 'vue'
//引入pinia
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
//創建實體
const pinia = createPinia()
//應用實體
app.use(pinia)
app.mount('#app')

4、定義 Store
創建一個store目錄(可根據實際項目結構自行調整),在該目錄下新建counters.ts文件來定義一個簡單的計數器相關的store,說到這里有兩種定義的方法:
(1)使用選項 API定義,主要是指實例應用的環節:

// counter.js
import { defineStore } from 'pinia'

// 第一個參數是應用程序中 store 的唯一 id
export const useCountStore = defineStore('counter', {
  // state 是用于存儲狀態數據的函數,返回一個對象,類似與組件中data,定義變量
  state: () => ({
    count: 0
  }),

  // getters 類似于計算屬性,用于改變 state 數據
  getters: {
    doubleCount: (state) => state.count * 2
  },

  // actions 用來定義改變 state 的方法,可以是異步操作等,相當于組件中methods
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

(2)用setup方式定義

import { defineStore } from "pinia";
import { ref, computed } from 'vue'

export const useCountStore = defineStore('count',() => {
    //定義變量
    
    const count = ref(0)

    //定義修改數據的方法
    const doubleCount = computed(()=>count.value*2)
    const increment = () => {
        count.value ++;
     }

    const  decrement = () => {
        count.value --;
    }

    //以對象的形式return
    return {
        count,
        doubleCount,
        increment,
        decrement
    }
})
  1. 在組件中使用 Store
    以下是在一個 Vue 組件(例如CounterView.vue)中使用上述定義的counte store的示例:
<template>
    <div>當前計數:{{count}}</div>
    <div>當前雙倍計數:{{useCount.doubleCount}}</div>
    <button @click="useCount.increment()">加一</button>
    <button @click="useCount.decrement()">減一</button>
</template>

<script setup lang="ts">

//1、首先引入useCountStore 文件
import { useCountStore } from './store';
import { storeToRefs } from 'pinia'   

//2、
const useCount = useCountStore();

//用storeToRefs來包裹變量,實現響應式數據。
const { count } = storeToRefs(useCount)
</script>
<style scoped>
</style>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容