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();// 打印countconsole.log(infoStore.count);// 使用仓库里的方法const updateSotreCount = () =>{infoStore.updateCount();}
</script>
