Vue3 pinia状态管理工具怎么使用.docxVIP

第

Vue3pinia状态管理工具怎么使用

pinia是什么？

这个是vue3新的状态管理工具，简单来说相当于之前vuex，它去掉了Mutations但是也是支持vue2的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

这个是vue3新的状态管理工具，简单来说相当于之前vuex，它去掉了Mutations但是也是支持vue2的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

npmipinia

1、mian.js中引入pinia，全局注册

import{createApp}fromvue

import{createPinia}frompinia

importAppfrom./App.vue

constapp=createApp(App)

app.use(createPinia())

app.mount(#app)

2、store文件夹新建index.js文件，支持TS的你就建立index.ts,文件中引入pinia使用，用来存储状态

import{defineStore}frompinia

exportconstuseUserStore=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=change1change1/button

button@click=change2change2/button

button@click=change3change3/button

button@click=change4change4/button

button@click=change5change5/button

div

button@click=handleReset重置/button

/div

/template

scriptsetuplang=ts

import{storeToRefs}frompinia

import{useUserStore}from./store

//获取store中的值

letUser=useUserStore()

//通过ES6的结构取值，但是这个值不是响应式的

let{name,age}=User

//通过pinia自带的方法，转换成ref，就是响应式的了

let{name1,age1}=storeToRefs(User)

//改变store中值的方式有五种

//方式一

functionchange1(){

User.age++

//方式二，可一次性修改多个值，对象的形式

functionchange2(){

User.$patch({

name:雪见,

age:17

//方式三，可一次性修改多个值，函数的形式

functionchange3(){

User.$patch((state)={

state.name=徐长卿

state.age=19

//方式四，哪怕修改一个值，也要传所有值？？？

functionchange4(){

User.$state={

name:茂茂,

age:16,

name1:李逍遥,

age1:18

//方式五，借助actions

functionchange5(){

User.setAge()

//也可以传参

//User.setAge(999)

//重置数据

functionh