我有以下代码
<script lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import dashboardLayout from "@/layouts/dashboard.vue";
import { useDefaultStore } from "@/stores/default";
import "./index.css";
import { defineComponent } from "vue";
export default defineComponent({
setup() {
let { getLayout } = useDefaultStore();
return { getLayout };
},
components: { defaultLayout, dashboardLayout },
});
</script>
<template>
{{ getLayout }}
<component :is="getLayout">
<RouterView />
</component>
</template>
当我到达时/dashboard
我的状态得到更新,但吸气剂由于某种原因没有更新,这是为什么?
<script setup lang="ts">
import { useDefaultStore } from "@/stores/default";
let { getUserData, SET_LAYOUT, getLayout } = useDefaultStore();
SET_LAYOUT("dashboardLayout");
</script>
这是我的商店:
actions: {
SET_LAYOUT(layout: any) {
console.log("setting layout");
console.log(layout);
this.layout = layout;
},
}
我确实可以看到控制台内的更改,但它们不会应用到 UI 上
我已经发现了。
您无法破坏您的商店,它会失去反应性
let { getLayout } = useDefaultStore();
所以我把它改为
let store = useDefaultStore();
并使用store.getLayout
它有效!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)