个人主页:不叫猫先生
♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
系列专栏:vue3从入门到精通、TypeScript从入门到实践
资料领取:前端进阶资料以及文中源码可以找我免费领取
前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)
目录
- 一、Pinia与Vuex的区别
- 二、使用Pinia
- 三、直接修改数据的两种方式
- 四、使用actions修改数据
- 五、重置state中数据
- 六、Pinia持久化存储
- 七、Pinia模块化实现
- 八、Pinia中store之间互相调用
Pinia官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具,那么两者有什么区别呢?
一、Pinia与Vuex的区别
- pinia只有store、getter、actions,么有mutations,简化了状态管理的操作
- pinia模块划分不需要modules,
- pinia自动化代码拆分
- pinia对ts支持很好以及vue3的composition API
- pinia体积更小,性能更好
二、使用Pinia
defineStore( )
方法的第一个参数:容器的名字,名字必须唯一,不能重复
defineStore( )
方法的第二个参数:配置对象,放置state,getters,actions
state
属性: 用来存储全局的状态
getters
属性: 用来监视或者说是计算状态的变化的,有缓存的功能
actions
属性: 修改state全局状态数据,可以是异步也可以是同步
Pinia
可以用于vue2.x也可以用于vue3.x中
- 安装
yarn add pinia -S
main.js
引入
import {createApp} from "vue"import App from "./app.vue"import store from "./store/index.js"const app = createApp(App);import { createPinia } from "pinia";const store = createPinia();app.use(store).mount("#app")
- 在store文件夹下新建test.js
import {definePinia} from "pinia"export default testStore = definePinia('testId',{ state:()=>{ tname:"test", tnum:0, }, getters:{ changeTnum(){ console.log("getters") this.tnum++; } }, actions:{ addNum(val){ this.tnum += val } }, //持久化存储配置 presist:{ enable:true,// strategies:[ { key:"testId", storage:localStorage, paths:['tnum'] } ] }})
在用actions的时候,不能使用箭头函数,因为箭头函数绑定是外部的this。actions里的this指向当前store
- 在store文件夹下新建index.js,便于管理
import {createPinia} from "pinia"const store = createPinia();export default store
- 新建
A.vue
组件,引入store模块和storeToRefs
方法
storeToRefs
:解构store
中的数据,使之成为响应式数据
<template> <div> <div> {{tname}}</div> <div> {{tid}}</div> <div> tnum: {{tnum}}</div> <div> {{tchangeNum}}</div> <div><button @click="tchangeName">修改</button></div> <div> <button @click="treset">重置</button></div> <div @click="actionsBtn">actionsBtn</div> </div></template>
<script setup>import { storeToRefs } from 'pinia'import { useStore } from '../store/user'import { useTest } from '../store/test.js'const testStore = useTest();let { tname, tchangeNum, tnum } = storeToRefs(testStore)</script>
三、直接修改数据的两种方式
直接修改数据与使用$path
修改数据相比,官方已经明确表示$patch
的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据,推荐使用$patch
方式更新。
虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于actions
中统一方法修改(piain没有mutation)。
//直接修改数据tchangeName(){ tname.value = "测试数据"; tnum.value++;}//当然也可以使用`$path`批量修改tchangeName(){ testStore.$path(state=>{ state.tname = "测试数据"; state.value = 7; })}
四、使用actions修改数据
直接调用actions
中的方法,可传参数
const actionsBtn = (){ testStore.addNum(5) }
五、重置state中数据
store
中有$reset
方法,可以直接对store
中数据重置
const treset = (){ testStore.$reset()}
六、Pinia持久化存储
- 实现持久化存储,需要配合以下插件使用
yarn add pinia-plugin-persist
- 配置
store
文件夹下的index.js
文件,引入pinia-plugin-presist
插件
import {createPinia} from "pinia"import piniaPluginPresist from "pinia-plugin-presist"const store = createPinia();store.use(piniaPluginPresist)export default store
- 配置stroe文件夹下的test.js文件,使用
presist
属性进行配置
import {definePinia} from "pinia"export default testStore = definePinia('testId',{ state:()=>{ tname:"test", tnum:0, }, getters:{ changeTnum(){ console.log("getters") this.tnum++; } }, actions:{ addNum(val){ this.tnum += val } }, //持久化存储配置 presist:{ enable:true,// strategies:[ { key:"testId", storage:localStorage, paths:['tnum'] } ] }})
enable:true
,开启持久化存储,默认为使用sessionStorage
存储
–strategies
,进行更多配置
–key
,不设置key时,storage的key为definePinia
的第一个属性,设置key值,则自定义storage的属性名storage:localStorage
,设置缓存模式为本地存储paths
,不设置时对state
中的所用数据进行持久化存执,设置时只针对设置的属性进行持久化存储
七、Pinia模块化实现
模块化实现即在store对要使用的模块新建一个js文件,比如user.js
文件。然后配置内容跟其他模块一样,根据自己需求进行设置,然后在对应页面引入。
八、Pinia中store之间互相调用
比如:test.js
获取user.js
中state
的name
属性值,在test.js
引入user.js
import { defineStore } from 'pinia'import { userStore } from "./user.js"export const useTest = defineStore("testId", {state: () => {return {tid: "111",tname: "pinia",tnum: 0}},getters: {tchangeNum() {console.log('getters')return this.tnum + 100}},actions: {tupNum(val) {console.log('actions')this.tnum += val;},getUserData() {console.log(useStore().name);return useStore().name;},},persist: {//走的sessionenabled: true,strategies: [{key: "my_testId",storage: localStorage,paths: ['tnum']}]}})
user.js
中
import { defineStore } from 'pinia'export const useStore = defineStore('storeId', { state: () => { return { num: 0, name: '张三' } }})
A.vue
组件中,调用test.js
中getUserData
方法就可以得到uesr.js
中的name
值
const actionBtn = () => { testStore.getUserData()};