如何从外部更改 vue 数据？

Question

我在export default 对象之外有一个函数。如何让停止按钮在 1 秒后变为播放按钮？

简而言之：我想将playingStatus 更改为超出范围的false。

---

请查看{N} PlayGround link for question

---

<template>
    <Page>
        <ActionBar title="Home" />
        <ScrollView>
            <StackLayout>
                <Image v-show="!playingStatus" @tap="startFunc"
                    src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png"
                    stretch="aspectFit" />
                <Image v-show="playingStatus"
                    src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-512.png"
                    stretch="aspectFit" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    function playForAWhile() {
        setTimeout(stop, 1000);
    }

    function stop() {
        playingStatus =
        false; // scope error... How to change vue data from outside?
    }

    export default {
        data() {
            return {
                playingStatus: false
            };
        },
        methods: {
            startFunc() {
                this.playingStatus = true;
                playForAWhile();
            }
        }
    };
</script>

<style scoped>
</style>

或者，我如何在没有 vue 对象的情况下切换图像，而不是从外部更改变量。 提前致谢。

Answer 1

您根本不应该尝试从外部更改数据。您可以仅使用组件方法来实现您的目标，例如：

export default {
  data() {
    return {
      playingStatus: false
    };
  },
  methods: {
    playForAWhile() {  // execute this on tap
      this.playingStatus = true;

      // rest of the playing code

      setTimeout(() => {
        this.playingStatus = false;
      }, 1000);
    }
  }
};