Comment résoudre le problème selon lequel la page ne change pas après avoir utilisé l'affectation réactive dans vue3

Raison de la scène

Nous devons utiliser les données du serveur pour rendre la page dans vue3. J'utilise l'attribut de données réactives généré par réactif, mais les données demandées ne sont pas rendues et affichées sur la page après. montage supérieur.

Technologie : vue3 、 element-ui-plus

1. Exemple

home.vue

<template>
  <div class="common-layout">
    <el-menu @select="changeMenu" :collapse="isCollapse" active-text-color="#409eff" background-color="#333744"
      class="el-menu-vertical-demo" default-active="2" text-color="#fff" :unique-opened="true">
      <el-sub-menu :index="item.path" v-for="(item) in parmar.menus" :key="item.id">
        <template #title>
          <el-icon>
            <List />
          </el-icon>
          <span>{{ item.authName }}</span>
        </template>
        <el-menu-item :index="item2.path" v-for="(item2) in item.children" :key="item2.id">
          <el-icon>
            <Menu />
          </el-icon>
          {{ item2.authName }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script setup>
// 引入模块
import { reactive, onMounted } from &#39;vue&#39;
import { useRouter } from &#39;vue-router&#39;
import http from &#39;@/utils/request&#39;
const router = useRouter();
let menusList = reactive([
]);
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  // 这里直接赋值，会导致menusList失去响应式了
  menusList = data.data;
  console.log(menusList);
}
const changeMenu = (key) => {
  router.push(&#39;/home/&#39; + key)
}
</script>
<style lang="less" scoped>
.common-layout {
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /deep/.el-menu--vertical {
    margin: 0;
    border-right: none !important;
    overflow-x: hidden;
    height: calc(100vh - 100px);
    user-select: none;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>

Par affectation directe, on peut voir que les données deviennent des données ordinaires et ne sont pas réactives.

2. Solution

1. Utilisez ref pour stocker des données réactives

Le code est le suivant :

<script setup>
// 引入模块
import { ref, reactive, onMounted } from &#39;vue&#39;
import http from &#39;@/utils/request&#39;
let menusList = ref([
]);
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  // 这里直接赋值value，在页面上直接使用menusList即可！
  menusList.value = data.data;
}
</script>

On peut voir que les données imprimées sont des données détournées par ref et sont réactives.

2. Utilisez des objets pour envelopper les données à modifier en réactif

Le code est le suivant :

<script setup>
// 引入模块
import { reactive, onMounted } from &#39;vue&#39;
import http from &#39;@/utils/request&#39;
let parmar = reactive({
  menus: [
  ]
});
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  // 这里直接赋值对象里面的数据，就不会造成把响应式替换掉的情况了，直接在页面上通过parmar.menus使用数据！
  parmar.menus = data.data;
  console.log( parmar);
}
</script>

En utilisant cette méthode, les données sont également réactives.

3. La boucle for pousse vers les données réactives sans détruire la structure des données

Le code est le suivant :

<script setup>
// 引入模块
import { reactive, onMounted } from &#39;vue&#39;
import http from &#39;@/utils/request&#39;
let menusList = reactive([])
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  for (let i of data.data){
    menusList.push(i);
  }
  console.log(menusList);
}
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!