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>
2.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>
3.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>