Vue-数据管理Pinia

安装

项目在终端中输入以下代码安装pinia

npm i pinia

main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
// 引入pinia
import {createPinia} from 'pinia'

const app = createApp(App)
//创建pinia
const pinia = createPinia()
//安装
app.use(pinia)
app.mount('#app')

存储数据

首先在src/store目录下创建一个用于存储数据的ts文件

在文件中引入资源（defineStore后面第一个参数是这个文件名，return地方是数据）

数据是全局共享的

import { defineStore } from "pinia";

export const useContStore = defineStore('count', {
	//存储数据的地方
	state() {
		return {
			sum: 2
		}
	}
})

获取数据

在要获取数据的vue文件的script中引入

import { useContStore } from '@/store/count';
const countStore = useContStore();

之后就可以跟存在本地数据一样调用

<h2>Sum:{{ countStore.sum }}</h2>

 简化获取（storeToRefs）

从countStore中解构具体数据，在使用时直接使用数据

import { storeToRefs } from 'pinia';
const countStore = useContStore();
const { sum } = storeToRefs(countStore);
html中
<h2>Sum:{{ sum }}</h2>

修改数据

直接改：

countStore.sum -= n.value;

批量改：

countStore.$patch({
	sum: 9,
	num:1
})

调用方法改：

在数据所在的ts中，添加一个action，我这里添加了add方法

export const useContStore = defineStore('count', {
	actions: {
		add(value:number) {
			//修改
			this.sum += value;
		}
	},
	//存储数据的地方
	state() {
		return {
			sum: 2
		}
	}
})

在要调用的vue的script中通过use出来的变量直接调用

import { useContStore } from '@/store/count';
const countStore = useContStore();
countStore.add(n.value);