uni状态管理pinpia

时间：2021-11-29 01:12:58

vuex的升级版 方便简洁个人感觉比vuex好用的多

引入就不多说了，官方文档都有介绍 下面直接上代码

1、首先定义仓库

import {
	defineStore
} from 'pinia';

export const editStore = defineStore('edit', {
	state: () => {
		return {
			vIndex: 0,
			views: [],
			isShowRight: false
		};
	},
	// 也可以这样定义
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.vIndex++;
		},
	},
});

2、然后组件引用

import {
		storeToRefs
	} from "pinia";
	import {
		editStore
	} from '../../stores/edit.js';
	const store = editStore();
	const {
		vIndex,
		views,
		isShowRight
	} = storeToRefs(store); // ✅


//触发事件里直接使用即可
puClick(type) {
				
				const edit = editStore();
				console.log(edit)
				edit.views.push({
					type: type,
					title: '新建组件'
				})
			}

3、页面使用

<script>
	import {
		storeToRefs
	} from "pinia";
	import {
		editStore
	} from '../../stores/edit.js';
	const store = editStore();
	const {
		vIndex,
		views,
		isShowRight
	} = storeToRefs(store); // ✅
	export default {
		data() {
			return {
				isShowRight: isShowRight,
				width: 0,
				height: 0,
				top: 0,
				left: 0,
				vIndex: vIndex,
				views: views,
			};
		}
		
	};
</script>

下面是一部分官方介绍

状态管理 Pinia | uni-app官网

介绍

uni-app 内置了 Pinia 。

使用 HBuilder X 不需要手动安装，直接使用即可。使用 CLI 需要手动安装，执行 yarn add pinia 或 npm install pinia。

Vue 2 项目暂不支持

#Pinia 是什么？

Pinia（发音为 /piːnjʌ/，如英语中的 peenya） 是 Vue 的存储库，它允许您跨组件、页面共享状态。在服务器端以及小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

  • 开发工具支持
    • 跟踪动作、突变的时间表
    • 存储出现在使用它们的组件中
    • 时间旅行和更容易的调试
  • 热模块更换
    • 修改您的存储而不重载您的页面
    • 在开发过程中保持任何现有状态
  • 为 JS 用户提供适当的 TypeScript 支持或自动完成
标签：

相关文章