关于ThemeProvider，无法检测到pina中computed返回主题配置变化的问题 #15
Description
Describe the bug
使用pina，computed根据主题类型返回不同的颜色配置，但是ThemeProvider无法检测
Reproduce link
No response
To reproduce
// stores/themes.ts
import { ref, computed } from 'vue'
export const useThemeColors = defineStore('themes', () => {
const theme = ref<'dark' | 'light'>('dark')
const themeColors = computed(() => {
console.log('update theme', theme.value)
return {
primary: theme.value === 'dark' ? 'blue' : '#f40'
}
})
const updateTheme = (themeType: 'dark' | 'light') => {
console.log('themeType', themeType)
theme.value = themeType
}
return { themeColors, theme, updateTheme }
})
// App.tsx
import { RouterView } from 'vue-router'
import { appService } from './api/AppService'
import { AppStore } from 'platform-store'
import { ThemeProvider, styled } from '@vvibe/vue-styled-components'
import { useThemeColors } from './stores/themes'
const LL6 = styled.div`
height: 50px;
background-color: ${(props) => props.theme.primary} !important;
color: #fff;
`
const AppInner = defineComponent({
setup() {
const themeStore = useThemeColors()
const { theme } = storeToRefs(themeStore)
const getWebInfo = async () => {
const res = await appService.getWebInfo()
AppStore.config({
language: 'zh'
})
const miniGameStore = AppStore.initMiniGameStore(res.data.mini_ws_url, '1000001')
miniGameStore.on('message', (data) => {
console.log('data', data)
})
}
const themeProviderRef = ref<InstanceType<typeof ThemeProvider>>()
onMounted(() => {
getWebInfo()
})
const themeColors = computed(() => {
return themeStore.themeColors
})
return () => {
return (
<ThemeProvider ref={themeProviderRef} theme={themeColors.value}>
<div
onClick={() => themeStore.updateTheme(themeStore.theme === 'dark' ? 'light' : 'dark')}
>
<LL6>34584390583 {themeStore.themeColors.primary}</LL6>
</div>
</ThemeProvider>
)
}
}
})
export default AppInnerExpected behavior
当我调用updateTheme时， 在页面中dom内容发生了变化，primary确实改变了，但是背景色却没有变化
Actual behavior
希望颜色变化可以被监听到并应用
Package version
No response
Framework version
No response
Node version
No response
Browsers version
No response
OS version
No response
Additional context
No response