關于pinia的簡單使用方式
更新時間：2024年04月26日 09:39:30 作者：bangbang給你兩錘
這篇文章主要介紹了關于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給結構出來，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è)務邏輯），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è)務邏輯更復雜的情況下，在index.js的actions中定義函數(shù)調用
- 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>
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進的API等,下面就跟隨小編一起來看看他們的使用區(qū)別吧2024-01-01
這篇文章主要介紹了Vue內部渲染視圖的方法，本文通過實例代碼圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-10-10
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue表單vxe-form多字段聯(lián)動校驗的操作方法(對一個控件校驗多個關聯(lián)字段)
vue表單vxe-form如何多字段聯(lián)動校驗,對一個控件校驗多個關聯(lián)字段,這篇文章給大家介紹vue表單vxe-form如何多字段聯(lián)動校驗,對一個控件校驗多個關聯(lián)字段,感興趣的朋友跟隨小編一起看看吧2026-02-02
vue自定義插件封裝，實現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實現(xiàn)簡易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
Vue.config.js配置報錯ValidationError:?Invalid?options?object解
這篇文章主要給大家介紹了關于Vue.config.js配置報錯ValidationError:?Invalid?options?object的解決辦法,主要由于vue.config.js配置文件錯誤導致的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。2017-03-03
這篇文章主要介紹了vue星級評分組件源碼,代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11