ホームページ >ウェブフロントエンド >jsチュートリアル >Pinia ストアでの Vue の反応性を理解する
職場で、社内のローカル開発作業用に模擬チャット ストアを作成するという任務を与えられており、その際、Vue についていくつかメモをとりました (経験はありましたが、フック)、これは私の黒曜石のメモです。お役に立てば幸いです :)
ref は、プリミティブ値をリアクティブにする Vue の方法です。 .value プロパティを使用してリアクティブ オブジェクト内の値をラップします。
import { ref } from 'vue' // Inside Pinia Store export const useMyStore = defineStore('my-store', () => { // Creates a reactive reference const count = ref<number>(0) // To access or modify: function increment() { count.value++ // Need .value for refs } return { count, // When exposed, components can use it without .value increment } }) </number>
// Simple ref const isLoading = ref<boolean>(false) // Array ref const messages = ref<message>([]) // Complex object ref const currentUser = ref<user null>(null) // Ref with undefined const selectedId = ref<string undefined>(undefined) </string></user></message></boolean>
import { watch, ref } from 'vue' export const useMyStore = defineStore('my-store', () => { const messages = ref<message>([]) // Simple watch watch(messages, (newMessages, oldMessages) => { console.log('Messages changed:', newMessages) }) }) </message>
// Immediate execution watch(messages, (newMessages) => { // This runs immediately and on changes }, { immediate: true }) // Deep watching watch(messages, (newMessages) => { // Detects deep object changes }, { deep: true }) // Multiple sources watch( [messages, selectedId], ([newMessages, newId], [oldMessages, oldId]) => { // Triggers when either changes } )
export const useMyStore = defineStore('my-store', () => { // State const items = ref<item>([]) const isLoading = ref(false) const error = ref<error null>(null) // Computed const itemCount = computed(() => items.value.length) // Actions const fetchItems = async () => { isLoading.value = true try { items.value = await api.getItems() } catch (e) { error.value = e as Error } finally { isLoading.value = false } } return { items, isLoading, error, itemCount, fetchItems } }) </error></item>
export const useMainStore = defineStore('main-store', () => { // Using another store const otherStore = useOtherStore() // Watching other store's state watch( () => otherStore.someState, (newValue) => { // React to other store's changes } ) })
export const useChatStore = defineStore('chat-store', () => { const messages = ref<message>([]) const refreshInterval = ref<number null>(null) const isRefreshing = ref(false) // Watch for auto-refresh state watch(isRefreshing, (shouldRefresh) => { if (shouldRefresh) { startAutoRefresh() } else { stopAutoRefresh() } }) const startAutoRefresh = () => { refreshInterval.value = window.setInterval(() => { fetchNewMessages() }, 5000) } const stopAutoRefresh = () => { if (refreshInterval.value) { clearInterval(refreshInterval.value) refreshInterval.value = null } } return { messages, isRefreshing, startAutoRefresh, stopAutoRefresh } }) </number></message>
export const useDataStore = defineStore('data-store', () => { const data = ref<data>([]) const isLoading = ref(false) const error = ref<error null>(null) // Watch loading state for side effects watch(isLoading, (loading) => { if (loading) { // Show loading indicator } else { // Hide loading indicator } }) // Watch for errors watch(error, (newError) => { if (newError) { // Handle error (show notification, etc.) } }) }) </error></data>
// ❌ Bad const data = ref() // Type is 'any' // ✅ Good const data = ref<string>([]) // Explicitly typed </string>
// ❌ Bad - No cleanup watch(source, () => { const timer = setInterval(() => {}, 1000) }) // ✅ Good - With cleanup watch(source, () => { const timer = setInterval(() => {}, 1000) return () => clearInterval(timer) // Cleanup function })
// ❌ Bad - Using watch for derived state watch(items, (newItems) => { itemCount.value = newItems.length }) // ✅ Good - Using computed for derived state const itemCount = computed(() => items.value.length)
// ✅ Good store organization export const useStore = defineStore('store', () => { // State refs const data = ref<data>([]) const isLoading = ref(false) // Computed properties const isEmpty = computed(() => data.value.length === 0) // Watchers watch(data, () => { // Handle data changes }) // Actions const fetchData = async () => { // Implementation } // Return public interface return { data, isLoading, isEmpty, fetchData } }) </data>
// ❌ Bad const count = ref(0) count++ // Won't work // ✅ Good count.value++
// ❌ Bad - Might miss initial state watch(source, () => {}) // ✅ Good - Catches initial state watch(source, () => {}, { immediate: true })
// ❌ Bad - No cleanup const store = useStore() setInterval(() => { store.refresh() }, 1000) // ✅ Good - With cleanup const intervalId = setInterval(() => { store.refresh() }, 1000) onBeforeUnmount(() => clearInterval(intervalId))
覚えておいてください: Pinia ストア
でリファレンスやウォッチを扱うときは、クリーンアップ、タイプ セーフティ、適切な編成を常に考慮してください。
以上がPinia ストアでの Vue の反応性を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。