面试题：Vue Pinia中全局状态与局部状态数据交互处理

Question

假设在Vue应用里，有一个全局状态store存储用户基本信息，还有一个局部状态store用于特定页面的个性化设置。当局部状态发生变化可能影响全局状态时（比如特定页面设置修改了用户偏好，影响全局展示），如何在Pinia中优雅地处理这种数据交互和更新逻辑？请给出具体实现思路及关键代码示例。

Answer 1

实现思路

1. 定义全局和局部状态：使用Pinia分别定义全局状态store和局部状态store。
2. 监听局部状态变化：在局部状态store中，通过watch监听相关状态的变化。
3. 更新全局状态：当局部状态变化影响全局状态时，在监听器中调用全局状态store的相关方法来更新全局状态。

关键代码示例

1. 定义全局状态store（假设为useGlobalStore）

import { defineStore } from 'pinia';

export const useGlobalStore = defineStore('global', {
    state: () => ({
        userInfo: {
            name: '',
            preferences: {}
        }
    }),
    actions: {
        updateUserPreferences(preferences) {
            this.userInfo.preferences = preferences;
        }
    }
});

2. 定义局部状态store（假设为useLocalStore）

import { defineStore } from 'pinia';
import { useGlobalStore } from './globalStore';

export const useLocalStore = defineStore('local', {
    state: () => ({
        localPreferences: {}
    }),
    setup() {
        const globalStore = useGlobalStore();
        const { localPreferences } = storeToRefs(this);
        watch(localPreferences, (newPreferences) => {
            globalStore.updateUserPreferences(newPreferences);
        }, { deep: true });
        return { localPreferences };
    }
});

在上述代码中，useLocalStore通过watch监听localPreferences的变化，一旦变化，就调用useGlobalStore的updateUserPreferences方法更新全局状态中的用户偏好。