pinia是什么？这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。
这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。
安装命令npm i pinia
使用1、mian.js 中引入 pinia，全局注册
import { createapp } from 'vue'import { createpinia } from 'pinia'import app from './app.vue' const app = createapp(app)app.use(createpinia())app.mount('#app')
2、store文件夹新建 index.js 文件，支持ts的你就建立 index.ts,文件中引入 pinia 使用，用来存储状态
import {definestore} from 'pinia'export const useuserstore = definestore("user",{ state() { return { name: '景天', age: 18, name1: '胡歌', age1: 36 } }, // 和vuex一样 getters: { }, // 和vuex一样 actions: { setage() { this.age-- } }})
3、页面中使用 pinia 中存储的状态
<template> <div>正常取值</div> <div>{{user.name}}</div> <div>{{user.age}}</div> <div>解构取值</div> <div>{{name}}</div> <div>{{age}}</div> <div>解构取值转ref</div> <div>{{name1}}</div> <div>{{age1}}</div> <button @click="change1">change1</button> <button @click="change2">change2</button> <button @click="change3">change3</button> <button @click="change4">change4</button> <button @click="change5">change5</button> <div> <button @click="handlereset">重置</button> </div></template> <script setup lang="ts">import { storetorefs } from 'pinia';import { useuserstore } from './store'; // 获取store中的值let user = useuserstore() // 通过es6的结构取值，但是这个值不是响应式的let {name,age} = user // 通过pinia自带的方法，转换成ref，就是响应式的了let {name1,age1} = storetorefs(user) // 改变store中值的方式有五种// 方式一function change1() { user.age++}// 方式二，可一次性修改多个值，对象的形式function change2() { user.$patch({ name: '雪见', age: 17 })}// 方式三，可一次性修改多个值，函数的形式function change3() { user.$patch((state) => { state.name = '徐长卿' state.age = 19 })}// 方式四，哪怕修改一个值，也要传所有值？？？function change4() { user.$state = { name: '茂茂', age: 16, name1: '李逍遥', age1: 18 }}// 方式五，借助actionsfunction change5() { user.setage() //也可以传参 // user.setage(999)} // 重置数据function handlereset() { user.$reset()} </script> <style></style>
以上就是vue3 pinia状态管理工具怎么使用的详细内容。