vue3使用pinia
pinia类似于vuex, 但相对于vuex少了mutations和modules。
vuex: 集中式管理状态容器, 可以实现任意组件之间通信; 核心概念: state\mutations\actions\getter\modules。
pinia: 集中式管理状态容器, 可以实现任意组件之间通信 核心概念: state\actions\getters。
- 安装使用
npm i pinia --save
- 在src目录内创建 ’store‘ 文件夹并且在文件夹内创建index.ts和modules文件夹
- 1、store/index.ts内容
// 引入pinia
import {createPinia} from 'pinia'
// 使用createPinia创建大容器
let piniaStore = createPinia();
// 导出
export default piniaStore;
- 2、store/modules/info.ts
// 定义info小仓库
import {defineStore} from 'pinia';
// 第一个参数: 小仓库名称 第二个参数: 小仓库配置对象
// defineStore方法执行会返回一个函数, 函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore('info',{
// 存储数据
state: ()=>{
return {
count: 99
}
},
actions: {
// 更新count数据方法
updateCount(){
this.count++;
}
},
getter: {}
})
export default useInfoStore;
- 3、在main.ts里引入
// 引入pinia仓库
import piniaStore from './store/index.ts'
app.use(piniaStore)
- 4、在需要使用的vue文件里引入
<template>
<div>
{{ infoStore.count }}
</div>
</templage>
<script setup lang='ts'>
import useInfoStore from '../../store/modules/info.ts';
let infoStore = useInfoStore();
// 打印count
console.log(infoStore.count);
// 使用仓库里的方法
const updateSotreCount = () =>{
infoStore.updateCount();
}
</script>