我们把数据存放在state中，如果修改它的话，就要使用pinia中另外一个重要的概念actions了。
如果与Vuex对比，pinia中的action相当于Vuex中mutation和action的总和。
在pinia的action中既可以处理同步修改，也可以处理异步。简化了Vuex中修改状态的概念。
同步修改
我们先来写一个同步修改的例子，
比如我们现在除了保存了用户名，还保存了用户的手机号码，然后增加一个修改手机号码的方法，这时就需要定义一个action了。
pinia官网也说明了，actions就相当于vue中methods，定义的时候也非常像：
import { defineStore } from 'pinia'
export const useProfileStore = defineStore('profile', {
state() {
return {
userName: '林哥',
phone: 18888888888,
}
},
actions: { // 和vue中的methods一样
updatePhone(newPhone) {
this.phone = newPhone // 可以使用this访问和修改state中的数据
},
},
})
我们在actions中定义了一个更新手机号的方法，它接受一个参数，把它设置为新的手机号
然后我们就可以在App.vue中调用这个方法了：
<template>
<div>用户名是： {{ profileStore.userName }}</div>
<div>手机号是： {{ profileStore.phone }}</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useProfileStore } from './store/profileStore'
const profileStore = useProfileStore()
onMounted(() => {
profileStore.updatePhone(19999999999) // 在页面挂载后，修改手机号
})
</script>
使用store的实例就可以直接调用store中定义的action，这我们调用updatePhone方法，修改了手机号，
刷新页面，这时页面上显示：
用户名是： 林哥
手机号是： 19999999999
异步修改
首先我们写一个模拟请求后台接口，
在src文件夹下建立一个api文件，然后在里面新建一个login.js的文件，它的内容是：
export function loginApi(userName, password) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if ((userName === '林哥') & (password === '9527')) {
resolve({
userName: '林哥',
phone: 18888888888,
avatar: 'avatar.jpg',
})
} else {
reject('用户名或密码错误')
}
}, 1000)
})
}
然后我们修改profileStore的内容，在state中新增了avatar头像这个属性，这些数据默认都是空，
在actions中新增了login，用于去调用异步的请求loginApi：
import { defineStore } from 'pinia'
import { loginApi } from '../api/login' // 新增
export const useProfileStore = defineStore('profile', {
state() {
return {
userName: '',
phone: '',
avatar: '', // 新增
}
},
actions: {
login(userName, password) { // 新增
loginApi(userName, password)
.then((res) => { // 登录成功以后，修改了用户名
this.userName = res.userName
})
.catch((err) => {
console.log(err)
})
},
},
})
最后我们在App.vue中调用login这个action：
<template>
<div>用户名是： {{ profileStore.userName }}</div>
<div>手机号是： {{ profileStore.phone }}</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useProfileStore } from './store/profileStore'
const profileStore = useProfileStore()
onMounted(() => {
profileStore.login('林哥', '9527') // 新增
})
</script>
页面上最终显示：
用户名是： 林哥
手机号是：
异步修改state并没有什么特殊，只是多调用了一个异步方法，修改时还是使用this就行了。这就比Vuex中方便不少。
使用$patch同时修改多个值
我们现在只更新了userName的值，我们还有phone和avatar两个值，可以这么写
this.userName = res.userName
this.phone = res.phone
this.avatar = res.avatar
也可以使用$patch方法，一次修改多个值：
this.$patch({
userName: res.userName,
phone: res.phone,
avatar: res.avatar,
})
页面上显示：
用户名是： 林哥
手机号是： 18888888888
这节课就到这里了，总结一下：
1）使用actions同步或者异步修改state
2）使用$patch可以一次修改多个值
ps：虽然pinia支持不通过action，直接修改state的值，但是我觉着统一在action中修改比较规范、合理。我看github上的讨论大部分人也都倾向不能随便state的值。所以这里只给大家介绍了在action中修改state的方式。
