🍍 Pinia与Vuex的作用是一样的,用来存储数据,高级一点说就是进行状态管理,适用于vue2和vue3。
➡️ 关于状态管理是什么(官网):状态管理 | Vue.js
🌟 本文以vue3为例,讲解如何在项目中使用pinia以及pinia的一些相关知识点。
目录
1.使用vite创建Vue项目
名称为vue-pinia ,语言选择TS
npm create vite@latest vue-pinia
cd vue-pinia
npm install
npm run dev
2.安装pinia
npm install pinia (或 yarn add pinia)
3.将pinia挂载到app
src / mian.ts
4.创建store仓库
store用来存放数据,可以理解为一个公共组件,只不过该公共组件里只存放数据,这些数据其他所有的组件都可以访问且修改。
(1)src下新建store文件夹,新建test.ts文件
使用 defineStore 创建store
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数写配置项,比如数据或修改数据的方法
export const useStore = defineStore('main',{
});
(2)App.vue中简单使用store
<script setup lang="ts">
import {useStore} from './store/test'
const store = useStore();
console.log(store);
</script>
<template>
</template>
<style scoped>
</style>
运行结果:
(3)存储数据
test.ts里添加state属性
export const useStore = defineStore('main',{
// state属性用来存放数据,接收箭头函数返回值,不能直接接受一个对象
state:()=>{
return {
name: "玉子烧",
num: 30
}
}
});
App.vue操作state
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from './store/test'
const store = useStore();
let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>
<template>
<h1> {{name}}</h1>
<h2>{{num}}</h2>
</template>
<style scoped>
</style>
(4)多个组件使用数据
创建子组件src/components/child.vue
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from '../store/test'
const store = useStore();
let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>
<template>
<h3>我是子组件</h3>
<h1> {{name}}</h1>
<h2>{{num}}</h2>
</template>
<style scoped>
</style>
app.vue中引入
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {useStore} from './store/test';
import child from './components/child.vue';
const store = useStore();
let { name, num } = storeToRefs(store);
// 使用storeToRefs() 为了从 Store 中提取属性同时保持其响应式
console.log(name ,num );
</script>
<template>
<h1> {{name}}</h1>
<h2>{{num}}</h2>
<child></child>
</template>
<style scoped>
</style>
(5)修改state的数据
点击按钮可以看到父子组件的num同时被修改。
(6)重置state数据
使用store的 $reset可以将刚才对数据做的修改全部还原成初始值
//重置store
const reset = () => {
store.$reset()
}
<button @click="reset">重置</button>
(7)批量更改store数据
刚才的修改只是对单个数据num进行修改,使用store的 $patch可以一次性修改多个数据。
const patchChange = () =>{
store.$patch({
name : '薯条',
num : 22
})
}
<button @click="patchChange">批量修改</button>
5.store中除了state的其他属性
(1)getterss属性
与计算属性(computed)相似,起的作用一样。里面可以写很多个方法。
<button @click="patchChange">批量修改</button>
export const useStore = defineStore('main',{
// state属性用来存放数据,接收箭头函数返回值,不能直接接受一个对象
state:()=>{
return {
name: "玉子烧",
num: 30
}
},
// 计算属性
getters:{
getAddNum:(state) =>{
return state.num +100;
}
// 也可以写成
// getAddNum(state){
// //this 指向 state,所以不要用箭头函数
// return this.num +100;
// }
}
});
(2)action属性
类似于methods,里面可以写一些处理业务逻辑的代码。
actions:{
// saveName(name:string){
// this.name = name;
// }
addNum(val:number) {
this.num += val
}
}
<button @click="store.addNum(2)">+2</button>