标签: vue-reactivity

我把 $testCounter 放在一个插件中以使其成为全球性的：

Vue.use({
  install(Vue) {
    Vue.prototype.$testCounter = 0;
    Vue.prototype.$incrementCounter = () => {
      Vue.prototype.$testCounter++;
    };
});

我想在某个组件中输出它。我还需要它的值在全球范围内更新，并且是被动的：

<template>
  <p>{{ $testCounter }}</p>
</template>

<script>
  mounted() {
    let comp = this;
    comp.watcherId = setInterval(() => {
      comp.$incrementCounter();

      // I want to remove this line and still be reactive :
      comp.$forceUpdate();

    }, 1000);
  }
</script>

我需要该属性是反应性的，我尝试了多种解决方案作为观察者、计算道具、vm.$set(...)，但我找不到正确的方法来做到这一点。

我需要使用字典作为我的存储变量之一，但它不像数组那样反应，解决这个问题的最佳实践是什么？我创建了最小的例子：

https://codesandbox.io/s/vuex-store-forked-ko3md?file=/src/App.vue

我已经为此苦苦挣扎了几天，也许你可以帮助我。我正在尝试从 firebase 获取数据（保存state.state.memory并在我的模板上显示它。我的变量在控制台上保存了更新，但模板没有显示任何内容。我尝试了所有方法，但我无法在模板上获取任何内容，你可以吗？解释？

谢谢！！

模板

<template>
  <div class="memory" id="memory">
    Memory
    <div class="elementos-memoria" v-for="item in saved" :key="item">
      {{ item.primero + item.operador + item.segundo + ' = ' + item.resultado }}
    </div>
    <div class="elementos-memoria" v-for="cuenta in cuentas" :key="cuenta">
      {{ cuenta }}
    </div>
  </div>
</template>

脚本

import M from "materialize-css";
import { inject, reactive, watch } from "vue";

export default {
  props: {
    cuentas: Array,
  },
  setup() {
    const state = inject("store");
    let saved = reactive({});
    watch(
      () => …

我正在尝试更改数据类型为'boolean'的变量。当页面首次加载时，数据运行良好。但是，当页面重新加载时，该变量会在方法中本地更新，而不是在全局数据部分中更新。因此，在控制台中，我不断收到错误“未捕获（承诺中）TypeError：无法读取 invokeDirectiveHook 处未定义的属性“值””

有什么我错过的吗？

<template>
  <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      val: ref(false);
    },
  },
  methods: {
    changeMe() {
      this.val = !this.val;
    }
  }
}
</script>

我有一个简单的隐藏表格

<template>
  <form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
    <input type="hidden" name="data" :value="myData"/>
    <input type="hidden" name="signature" v-model="mySignature" />
    <input ref="submit" type="submit">
  </form>
</template>

并且我希望附加到不同按钮 ( v-on:click="submitForm") 的方法提交此表单设置数据。

export default {
  name: 'MyComponent',
  methods: {
    submitForm() {
      // should update values for inputs
      this.myData = 'dynamically calculated';
      this.mySignature = 'creates signature from data';
      // submit the form with values above
      this.$refs.form.submit();
    },
  },
  data() {
    return {
      myData: null,
      mySignature: null,
    }
  }
}

但似乎我误解了反应性/绑定/参考？在 Vue 中，所以我试过了

• this.$refs.submit.click();
• this.$forceUpdate();
• 设置 …