1.1核心概念

vuex中有四個(gè)核心概念:

• 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，您還需要安裝一個(gè)插件并pinia在應(yīng)用程序的根目錄插入創(chuàng)建的插件：

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來創(chuàng)建一個(gè)項(xiàng)目

1.下載vite

npm init vite@latest

2.創(chuàng)建項(xiàng)目名
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'//創(chuàng)建Pinia實(shí)例
const pinia=createPinia()const app=createApp(App)//掛載到Vue根實(shí)例
app.use(pinia)app.mount('#app')

7.創(chuàng)建src\store\index.ts文件

import { defineStore}from 'pinia'// 1.定義并導(dǎo)出容器
//參數(shù)1:容器的ID,必須唯一,將來Pinia會(huì)把所有的容器掛載到根容器
//參數(shù)2:選項(xiàng)對(duì)象
//返回值:
export const useMainStore=defineStore('main',{/*類似于組件的data，用來存儲(chǔ)全局狀態(tài)的1.必須是函數(shù)：這樣是為了在服務(wù)端渲染的時(shí)候避免交叉請(qǐng)求導(dǎo)致的數(shù)據(jù)狀態(tài)污染2.必須是箭頭函數(shù)，這是為了更好的TS類型推導(dǎo)*/state:()=>{return {count:100,foo:'bar',arr:[1,2,3]}},// 類似于組件的computed,用來封裝計(jì)算屬性，有緩存的功能//函數(shù)接受一個(gè)可選參數(shù)，state狀態(tài)對(duì)象getters:{count10(state){console.log('count10 調(diào)用了')return state.count+10}//如果再getters中使用了this，則必須手動(dòng)指定返回值的類型，否則類型推導(dǎo)不出來// count10(): number{//     console.log('count10 調(diào)用了')//     return this.count+10// }},// 類似于組件的methods,封裝業(yè)務(wù)邏輯,修改stateactions:{//注意:不能使用箭頭函數(shù)定義，因?yàn)榧^函數(shù)綁定外部thischangeState(){//優(yōu)化前// this.count++// this.foo='hello'// this.arr.push(4)//優(yōu)化后，批量更新//如果涉及數(shù)據(jù)比較多，則推薦使用倉庫實(shí)例的$patch方法，//批量修改，雖然看起來和前面的幾乎沒有區(qū)別，但是會(huì)加快修改速度，//對(duì)程序的性能有很大的好處。$patch傳入一個(gè)對(duì)象，對(duì)象的屬性就是各種狀態(tài)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">修改數(shù)據(jù)</button></p>
</template><script lang="ts" setup>
import {storeToRefs} from 'pinia'
import {useMainStore} from '../store'const mainStore=useMainStore()
console.log(mainStore.count)//這是有問題的,因?yàn)檫@樣拿到的數(shù)據(jù)不是響應(yīng)式的，是一次性的
//Pinia 其實(shí)就是把state數(shù)據(jù)都做了reactive處理了
//const {count,foo}=mainStore//解決辦法就是使用
//把結(jié)構(gòu)出來的數(shù)據(jù)做ref響應(yīng)式代理
const {count,foo}=storeToRefs(mainStore)const handleChangeState=()=>{//方式一://mainStore.count++//mainStore.foo='hello'//方式二:如果需要修改多個(gè)數(shù)據(jù)，建議使用$patch批量更新// mainStore.$patch({//     count:mainStore.count+1,//     foo:'hello',//     arr:[...mainStore.arr,4]// })//方式三:更好的批量更新的方式: $patch 一個(gè)函數(shù)// mainStore.$patch(state=>{//     state.count++//     state.foo='hello'//     state.arr.push(4)// })//方式四:邏輯比較多的時(shí)候可以封裝到actions做處理mainStore.changeState()
}</script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。