vuejs3 - react 对象未在模板 Vue3 Composition API 上更新

我已经为此苦苦挣扎了几天,也许你能帮帮我。我正在尝试从 firebase 获取数据(保存在 state.state.memory 中并将其显示在我的模板上。我的变量 saved 在控制台上更新,但模板没有显示任何内容。我尝试了所有方法,但我无法在模板上获得任何内容,你能解释一下吗?

谢谢!!

模板

<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(
      () => state.state.memory,
      () => {
        saved = state.state.memory;
        console.log(saved);
      }
    );

    setInterval(() => console.log(saved), 1000);

    return {
      saved,
    };
  },
  mounted() {
    M.AutoInit();
  },
};

Auth.js文件

const state = reactive({
    user: {},
    memory: {},
})

const login = (email, password) => {
    let memory = []
    auth.signInWithEmailAndPassword(email, password).then((data) => {
        state.user = data.user
        db.collection('users').doc(state.user.uid).collection('operaciones').get().then((queryResult) => {
            queryResult.forEach(doc => {
                memory.push(doc.data())
            })
            state.memory = memory
        }).catch(err => console.log(err))
    })
}

const signIn = (email, password) => {
    auth.createUserWithEmailAndPassword(email, password).then(cred => {
        state.user = cred.user;
    })
}


const logout = () => {
    auth.signOut().then(() => {
        state.user = null;
        state.memory = null;
    })
}

最佳答案

看起来你正在替换响应式 state 值而不是改变它

saved = state.state.memory; 将替换它。

不确定 state.state.memory 对象中有什么(假设它是一个对象),但您可以使用 Object.assign 动态更新:

if (state.state.memory) {
  Object.assign(saved, state.state.memory)
}

关于vuejs3 - react 对象未在模板 Vue3 Composition API 上更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67971134/

相关文章:

numpy - XGBoost:检查失败:有效:输入数据包含 `inf` 或 `nan`

sql - 有没有一种方法可以不使用 FOR 循环来创建虚拟记录?

awk - 使用 awk 和 gsub 用字符串替换 CSV 的列

javascript - Target 的 Toggled ClassList 上的 CSS Tra

c++ - std::sort 中用 lambda 函数指定的比较函数是否返回 bool 类型?

next.js - NextJS 将类从页面传递到布局组件

xml - 同时迭代两个 for-each 循环

Flutter - 墨水池 : Why does onHover() require onTap()

c - 分拣技术 C

scala - 推特 future 封锁