在Vuex状态更新之前呈现组件
我在vuex getter上遇到了问题；在第一个登录时，当vuex处于其初始状态时，设置一些状态属性的操作就会被分派，然而，getter的后续使用仍然会检索null (状态属性的初始值)。
在vue组件的脚本中有以下内容：
beforeCreate() {
store.dispatch('getSomething', 1).then(() => {
this.loading = false
})
},
computed: {
...mapGetters({
something: 'getSomething'
})
}在模板中：
<v-row v-if="!loading">
...
<span class="text-16">{{ something.name }}</span>
...
</v-row>在某物商店：
const getters = {
getSomething: state => new Something(
state.something.id,
state.something.name,
state.something.description,
)
}我的期望是在组件加载之前调用该操作，并且是同步的，状态应该由所述操作填充，该操作提交一个设置状态的突变。相反，我得到了指向getter的以下错误：
TypeError: Cannot read properties of null (reading 'id')
at getSomething(something.js?62ce:12:1)更新(mwe)
<template>
<v-row v-if="!loading">
<v-col class="mt-3" cols="12" lg="3">
<base-card>
<v-row>
<v-col class="text-center" cols="12">
<v-avatar>
<v-icon>mdi-liquid-spot</v-icon>
</v-avatar>
<div class="card-title ma-1 text-h5">{{ something.name }}</div>
<div class="d-flex align-center justify-center">
<span class="text-16">{{ something.description}}</span>
</div>
</v-col>
</v-row>
</base-card>
</v-col>
</v-row>
</template>
<script>
import store from "@/store";
import {mapGetters} from "vuex";
export default {
name: "Dashboard",
beforeCreate() {
// getSomething action
store.dispatch('getSomething', 2).then(() => {
this.loading = false
})
},
computed: {
...mapGetters({
// getSomething getter
something: 'getSomething'
})
},
methods: {},
data() {
return {
loading: true
}
}
}
</script>
<style scoped>
</style>回答 1
Stack Overflow用户
发布于 2022-04-25 21:13:46
您的问题(很可能)与vuex无关。
这可能是用同一类型的另一个组件替换组件的情况。当发生这种情况时，除非组件是使用唯一的原始标识符的key-ed，否则组件实例将被重用(由Vue)，因此beforeCreate只被调用一次。
之后，每当更新组件时，就不再调用beforeCreate钩子(只调用beforeUpdate和updated钩子)。
您可以使用唯一的原语标识符(可能是key！？)对子组件进行key。或者使用beforeUpdated钩子。
另一个重要方面是存储操作是异步的。不要期望组件的创建或其安装正在等待操作的解决。如果这是您想要的，您应该调用父组件的操作，并将子组件的呈现(使用v-if)附加条件，使子组件的呈现在操作已解决时被设置(当您再次分派操作时取消设置，以获得另一个“东西”)。
如果我的答案对您没有帮助，请考虑创建一个可运行的Minimal, Reproducible Example。到目前为止，您发布的内容还不足以创建一个解决方案并测试潜在的解决方案。
这使您的问题无法回答，使它对未来的用户有类似的问题无用，并可能导致问题被关闭作为非主题。
https://stackoverflow.com/questions/72005197
复制相似问题
腾讯云开发者
