可写存储不能正确更新值？答案

【问题标题】：Stores writable not updating value correctly?可写存储不能正确更新值？
【发布时间】：2021-09-26 10:23:29
【问题描述】：

问题在于，截至目前，loadedModule 变量正确更新，而 userSettings（我遇到此问题的变量）在前端根本没有更新。

我正在使用一个外部文件来更新该变量，它适用于该文件，但不适用于 .svelte 文件。

stores.ts文件：

const { ipcRenderer } = require('electron/renderer')
import { Module } from './ts/Module'
import { UserSettings } from './ts/types/UserSettings'

import { Writable, writable } from 'svelte/store'

let mod: Module = null
export const loadedModule: Writable<Module> = writable(new Module('null', 'null', 'null', []))
loadedModule.subscribe(value => {
    console.log("new module updated")
    mod = value
})

let user: UserSettings
export const userSettings: Writable<UserSettings> = writable({zoomLevel:0, version:'b', dataPath:'null'})
userSettings.subscribe(value => {
    console.log("new settings updated")
    user = value
})

export function updateUserSettings(): void {
    userSettings.set(user)
}

export async function loadCurrentModule(module: string): Promise<void> {
    ipcRenderer.invoke('get-module', module).then((res) => {
        if (res != null) {
            loadedModule.set(Module.fromType(res))
        } else {
            console.error('Error while attempting to load a module: ' + module)
        }
    })
}

export async function saveCurrentModule(): Promise<void> {
    return new Promise(async () => {
        ipcRenderer.send('save-module', mod.toType())
    })
}

file.ts样本集调用：

...
import { userSettings } from './stores'
...

...
const zoomIn = () => {
    console.log("+")
    this.userSettings.zoomLevel++
    if (this.userSettings.zoomLevel > 5) this.userSettings.zoomLevel = 5
    userSettings.set(this.userSettings)
}
...

.svelte文件：

<script lang="ts">
    import { loadedModule, userSettings, loadCurrentModule, saveCurrentModule } from '../electron/stores'
    import { onMount } from 'svelte';

    onMount(()=>{
        loadCurrentModule("testmodule")
    })
    
    setTimeout(async ()=>{
        await saveCurrentModule();
    }, 4000)
</script>

<div>
    <p>UserSettings: {$userSettings.zoomLevel}</p>  
    <p>LoadedModule: {$loadedModule.name}</p>
</div>

对不起，如果这篇文章已经太长了，但我真的没有找到解决方案，我目前认为这可能是因为我在 stores.ts 以外的文件中使用了 userSetting.set() 函数，但是不明白为什么那行不通...

【问题讨论】：

你为什么要到处订阅和分配局部变量？你可以简单地做<p>UserSettings: {$userSettings.zoomLevel}</p>我建议删除所有这些不必要的重新分配并直接与商店合作，你的代码会更简单，更容易理解。
@StephaneVanraes 是的，这是真的！我以前使用过该语法，但在测试时将其更改为该语法。我不能在商店里改变它，但我会坚持你在 .svelte 文件上的方法。谢谢！更改了问题以反映编辑。

标签： typescript electron svelte

【解决方案1】：

要更新您正确使用.set 的商店，但是您设置的数据是什么样的？由于 userSettings 是可写存储，因此您不能只访问其中的数据，而且我不确定您的 this 在 file.ts 中的样子。可能会有所帮助的是进行更详细的日志记录。

import { userSettings } from './stores'

const zoomIn = () => {
    console.log("+", this.userSettings); // what's here?
    this.userSettings.zoomLevel++
    if (this.userSettings.zoomLevel > 5) this.userSettings.zoomLevel = 5
    userSettings.set(this.userSettings);
}

// also log the value when subscribing

userSettings.subscribe(value => {
    console.log("new settings updated", value); // log the value
    user = value
});

【讨论】：