關(guān)于pinia的簡單使用方式

更新時間：2024年04月26日 09:39:30 作者：bangbang給你兩錘

這篇文章主要介紹了關(guān)于pinia的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

pinia

1.pinia的安裝

npm install pinia

2.使用pinia創(chuàng)建一個store

01.在main.js引入

index.js

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp()

app.use(pinia).mount('#app')

02.在src目錄下創(chuàng)建store文件夾，在store文件夾下創(chuàng)建index.js文件

index.js

import { defineStore } from 'pinia'
import { demoStore } from './demo'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloWorld: 'Hello World!'
        }
    },
    getters: {},
    actions: {}
})

在state里面定義一個helloworld

03.在默認模板Helloworld.vue中使用，直接使用{{store.helloWorld}}即可顯示在界面上

HelloWorld.vue

<template>
    {{ store.helloWorld }}
</template>

<script setup>
import { mainStore } from '../store/index'

const store = mainStore()

</script>

<style lang='scss' scoped></style>

? 我們可以把helloworld給結(jié)構(gòu)出來，pinia中給我們提供了一個方法storeToRefs()，這樣我們頁面上就顯示了兩個Hello World!

HelloWorld.vue

<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld } = storeToRefs(store)

</script>
<style lang='scss' scoped></style>

3.pinia修改數(shù)據(jù)的4方式

01.在store中的index.js中新增一個count：0；然后在HelloWorld.vue中添加一個button，點擊按鈕count加1

HelloWorld.vue

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloWorld: 'Hello World!',
            count: 0
        }
    },
    getters: {},
    actions: {}
})

HelloWorld.vue

<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
    <div>{{ count }}</div>
    <el-button type='primary' @click="changeCount">修改數(shù)據(jù)</el-button>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld, count } = storeToRefs(store)

const changeCount = () => {
    store.count++
}

</script>

<style lang='scss' scoped></style>

02.使用$patch對象傳遞的方式（多數(shù)據(jù)情況下，相對01來說，更推薦使用這個方法，官方說$patch優(yōu)化了），index.js代碼不變

HelloWorld.vue

<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
    <div>{{ count }}</div>
    <el-button type='primary' @click="changeCount">修改數(shù)據(jù)</el-button>
    <el-button type='primary' @click="changeCountPatch">修改數(shù)據(jù)($patch方法對象)</el-button>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld, count } = storeToRefs(store)

const changeCount = () => {
    store.count++
}

const changeCountPatch = () => {
    store.$patch({
        count: store.count + 2
    })
}

</script>

<style lang='scss' scoped></style>

03.使用$patch函數(shù)傳遞的方式（更適合處理復雜的業(yè)務(wù)邏輯），index.js代碼不變

HelloWorld.vue

	<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
    <div>{{ count }}</div>
    <el-button type='primary' @click="changeCount">修改數(shù)據(jù)</el-button>
    <el-button type='primary' @click="changeCountPatch">修改數(shù)據(jù)($patch方法對象)</el-button>
    <el-button type='primary' @click="changeCountPatch2">修改數(shù)據(jù)($patch方法函數(shù))</el-button>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld, count } = storeToRefs(store)

const changeCount = () => {
    store.count++
}

const changeCountPatch = () => {
    store.$patch({
        count: store.count + 2
    })
}

const changeCountPatch2 = () => {
    store.$patch((store) => {
        store.count = store.count + 3
    })
}

</script>

<style lang='scss' scoped></style>

04.業(yè)務(wù)邏輯更復雜的情況下，在index.js的actions中定義函數(shù)調(diào)用

index.js

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloWorld: 'Hello World!',
            count: 0
        }
    },
    getters: {},
    actions: {
        changeState() {
            this.count++
        }
    }
})

HelloWorld.vue

<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
    <div>{{ count }}</div>
    <el-button type='primary' @click="changeCount">修改數(shù)據(jù)</el-button>
    <el-button type='primary' @click="changeCountPatch">修改數(shù)據(jù)($patch方法對象)</el-button>
    <el-button type='primary' @click="changeCountPatch2">修改數(shù)據(jù)($patch方法函數(shù))</el-button>
    <el-button type='primary' @click="changeStateActions">修改數(shù)據(jù)(actions)</el-button>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld, count } = storeToRefs(store)

const changeCount = () => {
    store.count++
}

const changeCountPatch = () => {
    store.$patch({
        count: store.count + 2
    })
}

const changeCountPatch2 = () => {
    store.$patch((store) => {
        store.count = store.count + 3
    })
}

const changeStateActions = () => {
    store.changeState()
}

</script>

<style lang='scss' scoped></style>

4.getters的使用

? 類似于vue中的計算屬性，比如我們有這樣一個需求，就是在state里有有一個狀態(tài)數(shù)據(jù)是電話號碼，我們想輸出的時候把中間四位展示為****.這時候用getters就是非常不錯的選擇。

index.js

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloWorld: 'Hello World!',
            count: 0,
            phone:'15139333888'
        }
    },
    getters: {
        phoneHidden(state){
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
        }
    },
    actions: {
        changeState() {
            this.count++
        }
    }
})

HelloWorld.vue

<template>
    <div>{{ store.helloWorld }}</div>
    <div>{{ helloWorld }}</div>
    <div>{{ count }}</div>
    <div>{{ phoneHidden }}</div>
	
    <el-button type='primary' @click="changeCount">修改數(shù)據(jù)</el-button>
    <el-button type='primary' @click="changeCountPatch">修改數(shù)據(jù)($patch方法對象)</el-button>
    <el-button type='primary' @click="changeCountPatch2">修改數(shù)據(jù)($patch方法函數(shù))</el-button>
    <el-button type='primary' @click="changeStateActions">修改數(shù)據(jù)(actions)</el-button>
</template>

<script setup>
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { helloWorld, count, phoneHidden } = storeToRefs(store)

const changeCount = () => {
    store.count++
}

const changeCountPatch = () => {
    store.$patch({
        count: store.count + 2
    })
}

const changeCountPatch2 = () => {
    store.$patch((store) => {
        store.count = store.count + 3
    })
}

const changeStateActions = () => {
    store.changeState()
}

</script>

<style lang='scss' scoped></style>