文章目录
一、Pinia是什么?
pinia是vue3.x新出的状态管理,它包括state,getter,action。
二、使用步骤
1.安装使用Pinia
代码如下(示例):
yarn add pinia
# or with npm
npm install pinia
2. main.js引入
代码如下(示例):
import { createPinia } from 'pinia'
app.use(createPinia())
3. main.js引入
代码如下(示例):
import { createPinia } from 'pinia'
app.use(createPinia())
4. 根目录新建store/index.js中写入
代码如下(示例):
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
}
},
getters:{},
actions:{}
})
5. 组件中使用
代码如下(示例):
<script setup>
import { useStore } from '../store'
const store = useStore();
</script>
三. State
1. Pinia定义state数据
代码如下(示例):
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters:{},
actions:{}
})
2. 组件使用pinia的state数据
代码如下(示例):
import { createPinia } from 'pinia'
app.use(createPinia())
2. 组件中使用
代码如下(示例):
<template>
<div>
<h1>A组件</h1>
{{ name }}
</div>
</template>
<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>
3.组件修改pinia的state数据
本身pinia可以直接修改state数据,无需像vuex一样通过mutations才可以修改,
但是上面写的let { name } = store;这种解构是不可以的,所以要换解构的方式。
<template>
<div>
<h1>A组件</h1>
{{ name }}
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name } = storeToRefs(store);
const btn = ()=>{
name.value = '123';
}
</script>
4.如果state数据需要批量更新
<template>
<div>
<h1>A组件</h1>
{{ name }}
{{ counter }}
{{ arr }}
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,counter,arr } = storeToRefs(store);
const btn = ()=>{
//批量更新
store.$patch(state=>{
state.counter++;
state.arr.push(4);
state.name = '456';
})
}
</script>
使用$patch进行批量更新
四.action
actions就比较简单了,写入方法,比如我们可以让state中的某一个值+=,而且传入参数
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0
}
},
getters:{},
actions:{
changeCounter( val ){
this.counter += val;
}
}
})
<template>
<div>
<h1>A组件</h1>
{{ counter }}
<button @click='add'>加10</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter } = storeToRefs(store);
const add = ()=>{
store.changeCounter(10);
}
</script>
五. getter
getters和vuex的getters几乎类似,也是有缓存的机制
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
}
},
getters:{
counterPar( ){
console.log(111);
return this.counter + 100;
}
},
actions:{}
})
<template>
<div>
{{ counterPar }}
{{ counterPar }}
{{ counterPar }}
<h1>A组件</h1>
{{ counter }}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar } = storeToRefs(store);
</script>
总结
- 支持选项式api和组合式api写法
- pinia没有mutations,只有:state、getters、actions
- pinia分模块不需要modules(之前vuex分模块需要modules)
- TypeScript支持很好
- 自动化代码拆分
- pinia体积更小(性能更好)
- 可以直接修改状态,不需要和vuex一样,需要mutations才可以修改