Vue 组件无响应？Pinia 状态改变后的“续命”秘方

vue.js

2024-03-23 03:48:20

Vue 组件无响应：Pinia Store 状态更改后的救星

导言

在 Vue 中使用 Pinia Store 管理状态时，有时组件无法对状态更改做出响应，阻碍了应用程序的平稳运行。本指南旨在探讨问题的根源并提供切实可行的解决方案，让你重新掌控组件的响应性。

问题：Vue 组件为何不响应 Store 状态更改？

Vue 组件需要响应式性才能检测到状态的变化。如果不使用适当的响应式技术，组件将保持原样，不会更新。

解决方案：恢复组件响应性

1. 拥抱响应式 API

使用 Vue 的 ref() 或 computed() API，将状态值包装在响应式对象中。当 Store 状态发生更改时，这些响应式对象会更新，触发组件重新渲染。

import { ref, computed } from 'vue'
import { useLoginStatusStore } from './stores/loginStatus.js';

export default {
  setup() {
    const loginStatusStore = useLoginStatusStore()

    const isLoggedIn = ref(loginStatusStore.isLoggedIn)
    const formattedIsLoggedIn = computed(() => isLoggedIn.value ? 'Yes' : 'No')

    return {
      isLoggedIn,
      formattedIsLoggedIn
    }
  }
}

2. 利用 Pinia Store 的订阅 API

Pinia 提供了一个 $subscribe() 方法，让你订阅 Store 状态的变化。当状态更改时，它会触发一个回调，手动更新组件状态。

import { onMounted } from 'vue'
import { useLoginStatusStore } from './stores/loginStatus.js';

export default {
  setup() {
    const loginStatusStore = useLoginStatusStore()

    onMounted(() => {
      loginStatusStore.$subscribe((state) => {
        this.isLoggedIn = state.isLoggedIn
      })
    })
  }
}

3. 借助第三方插件

使用 pinia-plugin-persistedstate 或 vuex-pathify 等插件，简化 Pinia Store 与组件之间的响应式绑定。

注意事项