pinia的学习
Pinia
是新一代的状态管理器(搭配vue3食用更香),也是由vuex
的团队开发的,目前也是在推广pinia
,有可能取代vuex
pinia特点
- 体积小
- 支持typeScript
- 去除了mutations
安装
npm i pinia -S
创建store仓库
//src/store/mainStore.js
import { defineStore } from 'pinia'
const mainStore = defineStore('mainStore', {
state:() => ({
count:0,
keyWord:'helloWorld'
}),
getters:{
countGetters(){
return this.count+10
}
},
actions:{
//注意这里不能使用箭头函数,因为this指向会出问题
changeCount(){
this.count++
},
},
})
export {
mainStore
}
引入store仓库
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
组件中使用以及修改store数据的方式
<script setup>
import { ref } from 'vue'
import { mainStore } from '../store/mainStore.js'
const store = mainStore()
defineProps({
msg: String
})
const count = ref(0)
// 第一种方式:一次只能改变单个数据
const handleClick = () => {
store.count++
}
// 第二种方式:通过对象改变多个数据,但是不能写业务逻辑
const handleClickPatch = () => {
store.$patch({
count:store.count + 1,
keyWord:store.keyWord === 'helloWorld' ? 'hahah' : 'helloWorld'
})
}
// 第三种方式:传递一个函数,可以实现业务逻辑
const handleClickPatchFunc = () => {
store.$patch(( state )=>{
// 可以拿到整个数据仓库
state.count++
console.log(state);
})
}
// 第四种方式:通过action实现业务逻辑
const handleClickPatchAction = () => {
store.changeCount()
}
</script>
<template>
<h1>{{ store.keyWord }}---{{ store.count }}</h1>
<h1>getters--{{ store.countGetters }}</h1>
<button @click="handleClick">count++</button>
<button @click="handleClickPatch">对象形式</button>
<button @click="handleClickPatchFunc">函数形式</button>
<button @click="handleClickPatchAction">action形式</button>
</template>
<style scoped>
a {
color: #42b983;
}
</style>
注意:这里使用的时候用store.属性名
的方式取值的,不能直接解构赋值,会使数据失去响应式,需要使用pinia
中的storeToRefs
api
pinia的持久化
与vuex
类似,pinia
也有相应的持久化插件pinia-plugin-persist
- 安装–
npm i pinia-plugin-persist -S
- 使用:在
main.js
中引入,并在仓库中设置
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)
app.mount('#app')
///src/store/mainStore.js
import { defineStore } from 'pinia'
const mainStore = defineStore('mainStore', {
state:() => ({
count:0,
keyWord:'helloWorld'
}),
getters:{
countGetters(){
return this.count+10
}
},
actions:{
//注意这里不能使用箭头函数,因为this指向会出问题
changeCount(){
this.count++
},
},
// 开启数据缓存
persist: {
enabled: true,
// 自定义key值,和存储类型
strategies: [
{
key: 'my_user',
storage: localStorage,
}
]
}
})
export {
mainStore
}