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>

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>