Vue3 pinia状态管理工具怎么使用
这篇文章主要介绍“Vue3 pinia状态管理工具怎么使用”，在日常操作中，相信很多人在Vue3 pinia状态管理工具怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3 pinia状态管理工具怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
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
}
}
// 方式五，借助actions
function change5() {
User.setAge()
//也可以传参
// User.setAge(999)
}
// 重置数据
function handleReset() {
User.$reset()
}
</script>
<style>
</style>到此，关于“Vue3 pinia状态管理工具怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论