您好,登录后才能下订单哦!
这篇文章主要介绍“Vue3 pinia状态管理工具怎么使用”,在日常操作中,相信很多人在Vue3 pinia状态管理工具怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3 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状态管理工具怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。