Question

我正在尝试监视vue组件中的vuex状态更改。（我正在扩展一个更大的项目，并希望通过获取一些行信息并根据此图像来对在一个组件中单击的表行做出反应。）

状态更改有效（我可以在vue开发人员工具中看到它），但是手表仅在初始加载/热加载时触发一次。我是vue和vuex（以及pug和ts）的新手，所以我想我缺少一些基本的知识。

我在这里找到了很多答案，指出应该只看商店，显然还有更多。我尝试了几种变体（直接访问商店，导入商店模块并使用计算所得的属性，但都不起作用，请参见下面的代码。要使任何手表正常工作，我需要做什么？

当我单击创建的测试按钮时，也会显示所有信息。

<template lang="pug">
    div
        p current image {{ imageUrl }}
        el-button(plain @click="onMyButtonClick") Button
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { Getter, Action, Mutation, State } from 'vuex-class';
import { RecordModuleState } from '../store/modules/records/types';

@Component
export default class ImageViewer extends Vue {
    @State('records') private records!: RecordModuleState;

    onMyButtonClick (): void {
        console.log('Button clicked:', this.records.currentRow)
    }

    get imageUrl() {
        return this.records.currentRow // also tried this.$store.state.records.currentRow
    }

    @Watch('this.$store.state.records', { immediate:true, deep: true })
    onCurrentRowChanged(val: string, oldVal: string) {
        console.log('watch1', val)
    }

    @Watch('records', { immediate:true, deep: true })
    onCurrentRowChanged2(val: string, oldVal: string) {
        console.log('watch2', val)
    }

    @Watch('imageUrl', { immediate:true, deep: true })
    onCurrentRowChanged3(val: string, oldVal: string) {
        console.log('watch3', val)
    }

}  
</script>

Answer 1

您应该使用@State('records') private records!: RecordModuleState;而不是使用@Getter records。

Vuex手表未触发所有状态更改

1 个答案: