[pinia快速入门]2.使用action修改state的值

Posted 2023-03-15

参考技术A 我们把数据存放在state中，如果修改它的话，就要使用pinia中另外一个重要的概念actions了。
如果与Vuex对比，pinia中的action相当于Vuex中mutation和action的总和。
在pinia的action中既可以处理同步修改，也可以处理异步。简化了Vuex中修改状态的概念。

我们先来写一个同步修改的例子，
比如我们现在除了保存了用户名，还保存了用户的手机号码，然后增加一个修改手机号码的方法，这时就需要定义一个action了。
pinia官网也说明了，actions就相当于vue中methods，定义的时候也非常像：

我们在actions中定义了一个更新手机号的方法，它接受一个参数，把它设置为新的手机号
然后我们就可以在App.vue中调用这个方法了：

使用store的实例就可以直接调用store中定义的action，这我们调用updatePhone方法，修改了手机号，
刷新页面，这时页面上显示：

首先我们写一个模拟请求后台接口，
在src文件夹下建立一个api文件，然后在里面新建一个login.js的文件，它的内容是：

然后我们修改profileStore的内容，在state中新增了avatar头像这个属性，这些数据默认都是空，
在actions中新增了login，用于去调用异步的请求loginApi：

最后我们在App.vue中调用login这个action：

页面上最终显示：

异步修改state并没有什么特殊，只是多调用了一个异步方法，修改时还是使用this就行了。这就比Vuex中方便不少。

我们现在只更新了userName的值，我们还有phone和avatar两个值，可以这么写

也可以使用$patch方法，一次修改多个值：

页面上显示：

这节课就到这里了，总结一下：
1）使用actions同步或者异步修改state
2）使用$patch可以一次修改多个值

ps：虽然pinia支持不通过action，直接修改state的值，但是我觉着统一在action中修改比较规范、合理。我看github上的讨论大部分人也都倾向不能随便state的值。所以这里只给大家介绍了在action中修改state的方式。