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

Question

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

Answer 1

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

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

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

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