响应式对象未在模板 Vue3 Composition API 上更新

Question

我已经为此苦苦挣扎了几天，也许你可以帮助我。我正在尝试从 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(
      () => 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;
    })
}

Answer 1

看起来您正在替换反应state值而不是改变它

saved = state.state.memory;将取代它。

不确定state.state.memory对象中有什么（假设它是一个对象），但您可以使用Object.assign动态更新：

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