一. 什么是pinia
- p
inia是一个vue的存储库,它能够跨组件/页面实现数据的共享
。 - 全局共享状态:export const state = reactive({}),但是这种方法会将您的应用程序暴露在安全漏洞之中。
- 没有过多的概念和API,主体简洁,易上手。
二. 为什么使用pinia
- 支持vue-devtools:vue数据状态的一种可视化调试工具
支持热模块的替换
- 当开发的时候保持所有存在的状态
再不要求重新加载页面条件下修改你的stores
- 支持各种插件
提供更好的ts支持和ts自动完成功能
- 支持服务端渲染
三. pinia和vuex的对比
- vuex的优点:
集中式管理数据之间的通信,便于开发和后期维护。
- 存储状态是响应式的,当从store读取数据的时候,如果数据发生了变化,能够触发响应式的渲染页面更新。
- js原生的数据对象写法,比起localStorage不需要做转换,使用方便。
- 限定了一种可预测的方式改变数据,避免大项目中数据的污染
- vuex的缺点:
刷新浏览器,vuex中的state会重新变为初始状态,解决方案-插件 vuex-persistedstate
- pinia的优点:
- 极其轻巧,没有复杂的api,易上手
- 完整的ts支持
- 支持 Vue DevTools
- 支持服务端渲染
- 没有mutations,actions中既可以处理同步,也可以处理异步
- 不再有 modules 的嵌套结构,不再需要注入、导入函数、调用函数。
- 适用于中小型项目
四. pinia的使用
// 创建一个store
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
// 常规写法
export const useUserInfoStore = defineStore('counter',{
state:()=>{
return {
age:25,
name:'wangjiajia'
}
},
getters:{
doubleCount: state => state.age * 2,
addCount: state => {
return number => state.age + number
}
},
// actions部分
actions:{
increment(){
this.age ++
}
}
})
// 一种高级写法:使用函数来定义store
export const useUserInfoStore = defineStore('counter', () => {
// state部分
const name = ref('wangjiajia')
const age = ref(25)
// getters部分
const doubleCount = computed(() => age.value * 2)
const addCount = computed(()=>{
return number => age.value + number
})
// actions部分
function increment() {
age.value++
}
return { name,age, doubleCount, increment,addCount }
})
使用pinia
<template>
<div class="header">
<button @click="clickIncrement">点击我</button>
<div class="content">{{ name }} -- {{ age }} -- {{ doubleCount }} -- {{ addCount(2) }}</div>
</div>
</template>
<script setup lang='ts'>
import {useUserInfoStore} from '../stores/counter'
import { storeToRefs } from 'pinia'
const userInfoStore = useUserInfoStore()
// 通过storeToRefs才能使结构出来的值具有响应式
const { name, age ,doubleCount, addCount} = storeToRefs(userInfoStore)
function clickIncrement(){ // 这里使用箭头函数也可以
userInfoStore.increment()
}
</script>
<style lang='less' scoped>
</style>
五. 总结
- 在vue3中建议使用Composition Api 即组合式Api。
- store的写法建议采用函数的方法。
- vue语法中建议采用setup语法糖形式。