30 vue3 Pinia对state的订阅监听（$subscribe）

上一篇：

29 vue3 Pinia--getters的使用_十一月的萧邦-CSDN博客

基本的使用已经记录完毕了，本篇记录 Pinia对store数据进行的订阅监听，更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe

1. 新建vue3项目，安装Pinia，配置Pinia，不再多说了，不会的可以看官网也可以看我前面的几篇记录文章

2. app.js---首先声明了一个state：baseUrl,写了一个action方法，用于改变baseUrl

import {defineStore} from "pinia"

const appStore = defineStore('appStore', {
    state: () => ({
        baseUrl: 'https://www.baidu.com/'
    }),
    actions: {
        changeState(params) {
            // console.log('接收到的参数===>', params)
            this.baseUrl = params
        }
    }
})

export default appStore

3. 页面调用 注释写的有点多，真实的内容并没有多少

4. 所达到的效果

改变前：

改变后：

下一篇：

31 vue3 Pinia监听订阅actions_十一月的萧邦-CSDN博客