vue3.0仓库pinia

最新推荐文章于 2025-05-28 20:26:36 发布

原创最新推荐文章于 2025-05-28 20:26:36 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #html #前端 #vue.js

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Pinia状态管理库的使用方法，包括如何定义和访问state，以及getters和actions的运用。在Page1和Page2中展示了state的读取和修改，Page3演示了批量修改state的多种方式。同时，actions作为Pinia中处理状态变更的主要手段，其异步同步操作的特点被强调。getters则用于创建基于state的计算属性。

state

大多数时候，state 是 store 的核心部分。我们通常从定义应用程序的状态开始。在 Pinia 中，状态被定义为返回初始状态的函数。 Pinia 在服务器端和客户端都可以工作。

store/car.js里的内容

import { defineStore } from "pinia";

export const userCar = defineStore("car", {

	state: () => {
		return { msg: "car仓库的数据", count: 0 }

	}


});

访问 “state”

//views里Page1里面的内容

<template>
  <div>
    <h1>page1</h1>
    <h2>来自于{{ store.msg }}</h2>
    <h2>来自于{{ store.count }}</h2>
  </div>
</template>

<script setup>
import { userCar } from "../store/car.js"; //这里引入的userCar是仓库中car.js里面定义的名称
let store = userCar(); //访问前先取出来
store.count++;
console.log(store.msg);
</script>

<template>
  <div>
    <h1>page2</h1>
    <p>{{ msg }}</p>
    <button @click="change1">change1</button>
    <button @click="look">look</button>
    <button @click="reset1">reset1</button>
  </div>
</template>

<script setup>
import { toRefs } from "vue";

import { userCar } from "../store/car.js";

let cardata = userCar();
let { msg } = toRefs(cardata);

let change1 = () => {
  msg.value = "点击change1后修改的值"; //注意：因为是响应式的值，要用value来取值
};

let look = () => {
  console.log(msg.value);
};

let reset1 = () => {
  cardata.$reset();
};
</script>

批量修改：

<template>
  <div>
    <h1>page3</h1>
    <p>{{ store.count }}---{{ store.price }}</p>
    <button @click="change1">批量修改</button>
    <button @click="look">look</button>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import MyStore from "../store/user.js";
let store = MyStore();
store.$subscribe((n1, state) => {
  console.log("当仓库数据修改时就会运行", state);
});
console.log(store.count, store.price);
function change1() {
  //批量修改0
  // store.count++
  // store.price++
  let { count, price } = toRefs(store);
  count.value++;
  price.value++;

  //批量修改1
  // store.count++
  // store.price++

  //批量修改2
  // store.$patch({
  // 	count:30,
  // 	price:200,
  // 	n:90
  // })

  //批量修改3
  store.$patch(() => {
    store.count++;
    store.price++;
  });
}
function look() {
  console.log(store.n);
}
</script>

Gettrs、Actions

Getter 完全等同于 Store 状态的计算值。

Actions：在pinia中没有提供mutaion因为Actions就够了(它可以异步同步的统一修改状态)之所以提供这个功能就是为了项目中的公共修改状态的业务统一

<template>
	<div>
		<h1 @click="fn">p4</h1>
	
		<p>{{store.msg}}--{{store.birth}}---{{store.age}}</p>
	</div>
</template>

<script setup>
	import {useBook} from "../store/book.js"
	let store=useBook()
	console.log(store.age)
	let  fn=()=>{
		// store.msg="123"
		store.tool()
	}
</script>

import { defineStore } from 'pinia'

export const useBook = defineStore("car", {
	state: () => {
		return { msg: "useBook仓库的数据", birth: "1997-02-03" }
	},
	getters: {
		age: (state) => {//箭头函数没有this，这里用一个形参来接收
			console.log(666666666)
			return new Date().getFullYear() - new Date(state.birth).getFullYear()
		}
	},
	actions: {
		tool() {
			console.log(11111111)
			this.msg = "66666"
			//1.可以异步函数的回调中修改仓库
			//2.统一修改
		}
	}
})