标签： Pinia

当仓库中state数据发生变化时，可以通过$subscribe进行监听

<script setup>
    import { storeToRefs } from 'pinia'
    import useStore from './store'
    const { test } = useStore()
    const { name, website } = storeToRefs(test)
  // 监听仓库数据变化
    const subscribe = test.$subscribe((mutation, state) => {},{})

  // 触发action
    test.changeName('liaoliao')
</script>

详解

store.$subscribe((mutation, state)=>{} , {})

$subscribe()有两个参数

第一个参数

回调函数 函数带有两个参数mutation和state

mutation

对象 有三个属性 events、storeId、type

events 包含state变化前后的数据

{
    "effect": {
                     ...
    },
    "target": {
        "name": "liaoliao",
        "website": "https://liaooo.cn"
    },
    "type": "set",
    "key": "name",
    "newValue": "liaoliao",
    "oldValue": "liao"
}

storeId

当前仓库的名字

storeID: "test"

type

用什么方式触发变化

type: "direct"
// "direct" 通过 action 变化的
// "patch object" 通过 $patch 传递对象的方式改变的
// "patch function"  通过 $patch 传递函数的方式改变的

第二个参数

对象 一些参数配置

{
  detached: false,
  immediate:false,
  deep:false,
  flush:'···',
}

detached

布尔值

默认false 订阅所在的组件被卸载时，订阅停止

如果设置detached值为true 时，即使所在组件被卸载，订阅依然生效

主动停止订阅

const subscribe = test.$subscribe((mutation, state) => {},{})
// 调用变量主动停止订阅
subscribe()

Pinia

https://pinia.vuejs.org/core-concepts/state.html#subscribing-to-the-state

Vuex

https://vuex.vuejs.org/zh/api/index.html#subscribe

安装

yarn add pinia
# or
npm i pinia

基本使用

在main.js中挂载Pinia

import { createPinia } from 'pinia'
const Pinia = createPinia()

createApp(App).use(Pinia).mount('#app')

新建仓库文件

src/test.js

引入defineStore方法

import { defineStore } from 'pinia'

创建store

命名规则：useXxxStore

defineStore( storeID , {state,actions,getters} )

参数1：store的唯一标识，也就是仓库名字

参数2：对象，可以在对象内提供state、actions、getters

const useTestStore = defineStore('test', {
  // state是一个函数 在返回的对象中写数据
    state: () => {
        return {
            name: 'liao',
            website: 'https://liaooo.cn',
        }
    },
    actions: {},
    getters: {}
})

export default useTestStore

在组件中使用

<script setup>
    import useTestStore from './store/test'
    const test = useTestStore()
</script>

<template>
    {{ test.name }}
    {{ test.website }}
</template>

actions的使用

Pinia中没有mutations，只有actions

在actions中添加方法并修改数据

...
actions: {
        changeName(name) {
            this.name = name
        }
  }
...

在组件中使用actions

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
  // 执行actions中的方法
    test.changeName('liaoliao')
</script>

getters的使用

添加getter

...
getters: {
        infoPage() {
            return this.website + '/talking'
        },
    }
...

在组件中使用

<template>
    ...
    {{ test.infoPage }}
</template>

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
    ...
</script>

storeToRefs的使用

直接解构store中的数据会导致数据丢失响应式特性

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
  // 解构出来的数据将不再是响应式的
    const { name, website } = test
    ...
</script>

使用storeToRefs可以使解构出来的数据依旧是响应式的

<script setup>
  // 从pinia中引入storeToRefs方法
  import { storeToRefs } from 'pinia'
    ...
    const { name, website } = storeToRefs(test)
    ...
</script>

模块化

根据项目复杂程度，有时候需要存储较多数据，可以定义多个store，最后统一用一个根store整合

新建user模块

src/store/user.js

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {})

export default useUserStore

新建······模块

新建根store

src/store/index.js

// 导入所有store
import useUserStore from './user'
import use···Store from './···'

// 统一导出useStore()方法
export default function useStore() {
  return {
    user: useUserStore(),
     ···: use···Store()
  }
}

在组件中使用

<script setup>
    import { storeToRefs } from 'pinia'
    import useStore from './store'
  // 解构user store
    const { user } = useStore()
    const { name, pwd } = storeToRefs(user)
</script>

订阅store中数据的变化($subscribe)

store.$subscribe详见下一篇笔记