1.1核心概念

vuex中有四個核心概念:

• State
• Getters
• Mutaions
• Actions

在Pinia中:

• State
• Getters
• Actions 同步異步都支持

1.2基本示例

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// could also be defined as// state: () => ({ count: 0 })actions: {increment() {//在vuex中我們需要搞兩步//1.定義mutations//2.提交mutationsthis.count++},},
})

然后在組件中使用它：

import { useCounterStore } from '@/stores/counter'export default {setup() {const counter = useCounterStore()counter.count++// with autocompletion ?counter.$patch({ count: counter.count + 1 })// or using an action insteadcounter.increment()},
} 

1.3Pinia vs Vuex

2.快速入門

2.1安裝

yarn add pinia
# or with npm
npm install pinia

2.2初始化配置

Vue3:

import { createPinia } from 'pinia'app.use(createPinia())

Vue2:
如果您使用的是 Vue 2，您還需要安裝一個插件并pinia在應用程序的根目錄插入創建的插件：

import { createPinia, PiniaVuePlugin } from 'pinia'Vue.use(PiniaVuePlugin)
const pinia = createPinia()new Vue({el: '#app',// other options...// ...// note the same `pinia` instance can be used across multiple Vue apps on// the same pagepinia,
})

2.3用vite來創建一個項目

1.下載vite

npm init vite@latest

2.創建項目名
pinia-examples

3.選擇vue

4.用ts還是不用
選擇vue-ts

5.npm install pinia

6.打開main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia} from 'pinia'//創建Pinia實例
const pinia=createPinia()const app=createApp(App)//掛載到Vue根實例
app.use(pinia)app.mount('#app')

7.創建src\store\index.ts文件

import { defineStore}from 'pinia'// 1.定義并導出容器
//參數1:容器的ID,必須唯一,將來Pinia會把所有的容器掛載到根容器
//參數2:選項對象
//返回值:
export const useMainStore=defineStore('main',{/*類似于組件的data，用來存儲全局狀態的1.必須是函數：這樣是為了在服務端渲染的時候避免交叉請求導致的數據狀態污染2.必須是箭頭函數，這是為了更好的TS類型推導*/state:()=>{return {count:100,foo:'bar',arr:[1,2,3]}},// 類似于組件的computed,用來封裝計算屬性，有緩存的功能//函數接受一個可選參數，state狀態對象getters:{count10(state){console.log('count10 調用了')return state.count+10}//如果再getters中使用了this，則必須手動指定返回值的類型，否則類型推導不出來// count10(): number{//     console.log('count10 調用了')//     return this.count+10// }},// 類似于組件的methods,封裝業務邏輯,修改stateactions:{//注意:不能使用箭頭函數定義，因為箭頭函數綁定外部thischangeState(){//優化前// this.count++// this.foo='hello'// this.arr.push(4)//優化后，批量更新//如果涉及數據比較多，則推薦使用倉庫實例的$patch方法，//批量修改，雖然看起來和前面的幾乎沒有區別，但是會加快修改速度，//對程序的性能有很大的好處。$patch傳入一個對象，對象的屬性就是各種狀態this.$patch(state=>{state.count++state.foo='hello'state.arr.push(4)})} }
})

8.修改HelloWorld.vue

<template><p>{{mainStore.count}}</p><p>{{mainStore.foo}}</p><p>{{mainStore.arr}}</p><p>{{mainStore.count10}}</p><p>{{mainStore.count10}}</p><p>{{mainStore.count10}}</p><hr><p>{{count}}</p><p>{{foo}}</p><hr><p><button @click="handleChangeState">修改數據</button></p>
</template><script lang="ts" setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '../store'const mainStore=useMainStore()
console.log(mainStore.count)//這是有問題的,因為這樣拿到的數據不是響應式的，是一次性的
//Pinia 其實就是把state數據都做了reactive處理了
//const {count,foo}=mainStore//解決辦法就是使用
//把結構出來的數據做ref響應式代理
const {count,foo}=storeToRefs(mainStore)const handleChangeState=()=>{//方式一://mainStore.count++//mainStore.foo='hello'//方式二:如果需要修改多個數據，建議使用$patch批量更新// mainStore.$patch({//     count:mainStore.count+1,//     foo:'hello',//     arr:[...mainStore.arr,4]// })//方式三:更好的批量更新的方式: $patch 一個函數// mainStore.$patch(state=>{//     state.count++//     state.foo='hello'//     state.arr.push(4)// })//方式四:邏輯比較多的時候可以封裝到actions做處理mainStore.changeState()
}</script>

總結

以上是生活随笔為你收集整理的Pinia轻量级状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。