关于pinia的简单使用方式
作者:bangbang给你两锤
这篇文章主要介绍了关于pinia的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
pinia
1.pinia的安装
npm install pinia
2.使用pinia创建一个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
目录下创建store
文件夹,在store
文件夹下创建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修改数据的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">修改数据</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
对象传递的方式(多数据情况下,相对01来说,更推荐使用这个方法,官方说$patch
优化了),index.js
代码不变
- HelloWorld.vue
<template> <div>{{ store.helloWorld }}</div> <div>{{ helloWorld }}</div> <div>{{ count }}</div> <el-button type='primary' @click="changeCount">修改数据</el-button> <el-button type='primary' @click="changeCountPatch">修改数据($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
函数传递的方式(更适合处理复杂的业务逻辑),index.js
代码不变
- HelloWorld.vue
<template> <div>{{ store.helloWorld }}</div> <div>{{ helloWorld }}</div> <div>{{ count }}</div> <el-button type='primary' @click="changeCount">修改数据</el-button> <el-button type='primary' @click="changeCountPatch">修改数据($patch方法对象)</el-button> <el-button type='primary' @click="changeCountPatch2">修改数据($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 }) } const changeCountPatch2 = () => { store.$patch((store) => { store.count = store.count + 3 }) } </script> <style lang='scss' scoped></style>
04.业务逻辑更复杂的情况下,在index.js的actions中定义函数调用
- 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">修改数据</el-button> <el-button type='primary' @click="changeCountPatch">修改数据($patch方法对象)</el-button> <el-button type='primary' @click="changeCountPatch2">修改数据($patch方法函数)</el-button> <el-button type='primary' @click="changeStateActions">修改数据(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
里有有一个状态数据是电话号码,我们想输出的时候把中间四位展示为****
.这时候用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">修改数据</el-button> <el-button type='primary' @click="changeCountPatch">修改数据($patch方法对象)</el-button> <el-button type='primary' @click="changeCountPatch2">修改数据($patch方法函数)</el-button> <el-button type='primary' @click="changeStateActions">修改数据(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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。