关于pinia的简单使用方式
更新时间：2024年04月26日 09:39:30 作者：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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧2024-01-01
这篇文章主要介绍了Vue内部渲染视图的方法，本文通过实例代码图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-10-10
这篇文章主要介绍了一个手写的vue放大镜，组件使用less，文中给出了示例代码,需要的朋友可以参考下2019-08-08
vue 界面刷新数据被清除 localStorage的使用详解
今天小编就为大家分享一篇vue 界面刷新数据被清除 localStorage的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue表单vxe-form多字段联动校验的操作方法(对一个控件校验多个关联字段)
vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段,这篇文章给大家介绍vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段,感兴趣的朋友跟随小编一起看看吧2026-02-02
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装，实现简易的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
最新评论