如何解决模板中的Vue 3计算对象抛出错误
我正在尝试将基于选项的组件转换为使用composition API，因为我在多个组件中需要大量方法。
这些方法之一如下所示：map
此方法和其他方法在我的setup()方法中被命名为const map = useMap();对象的名称空间：:tile="map.currentTile"
这也返回了，但是当我试图在模板中将其用作其他组件（.value）的道具时，出现以下运行时错误：
无效的道具：道具“ tile”的类型检查失败。预期的图块，有对象
我在这里做错了什么？该文档说，计算得出的返回类型为：https://v3.vuejs.org/guide/typescript-support.html#typing-computed
编辑：似乎我也需要在模板中使用reactive。那么，更新的问题，是否可以在模板中忽略呢？
EDIT2：如果我再次将组合函数的返回结果包装在.value中，则无需mapStore.getState()就可以工作。但这似乎是一个过大的语法，尤其是考虑到const { computed,createApp,defineComponent,reactive,readonly } = Vue;
class Clazz {
_str = '';
_int = 0;
constructor(str: string) {
this._str = str;
}
get str(): string {
return this._str;
}
get int(): number {
return this._int;
}
increment(): void {
this._int++;
}
}
interface Test {
clazz: Clazz;
}
class TestStore {
state: Test;
constructor() {
this.state = reactive({
clazz: new Clazz('test'),});
}
getState(): Test {
return readonly(this.state);
}
increment(): void {
this.state.clazz.increment();
}
}
const testStore = new TestStore();
function useStore() {
const clazz = computed((): Clazz => testStore.getState().clazz);
return {
clazz,};
}
const CounterComponent = defineComponent({
name: 'CounterComponent',props: {
clazz: {
type: Clazz,required: true,},setup() {
function increment() {
testStore.increment();
}
return {
increment,};
},template: '<button @click="increment">Clicks: {{ clazz.int }}</button> {{clazz.str}}',});
const TestComponent = defineComponent({
name: 'TestComponent',components: {
CounterComponent,setup() {
const store = useStore();
return {
store,template: '<counter-component :clazz="store.clazz"></counter-component>',});
createApp(TestComponent).mount('#app');已经是一个反应性值。
EDIT3：添加代码段：
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
<div id="app"></div>#include <iostream>
#include <string>
template <int N,bool fizz,bool buzz>
struct _FizzBuzz;
template <int N>
struct FizzBuzz : _FizzBuzz<N,N % 3 == 0,N % 5 == 0>
{
};
template <>
struct FizzBuzz<1>
{
static std::string str()
{
return "1";
}
};
template <int N>
struct _FizzBuzz<N,true,true>
{
static std::string str()
{
return FizzBuzz<N - 1>::str() + "\nFizzBuzz";
}
};
template <int N>
struct _FizzBuzz<N,false>
{
static std::string str()
{
return FizzBuzz<N - 1>::str() + "\nFizz";
}
};
template <int N>
struct _FizzBuzz<N,false,true>
{
static std::string str()
{
return FizzBuzz<N - 1>::str() + "\nBuzz";
}
};
template <int N>
struct _FizzBuzz<N,false>
{
static std::string str()
{
return FizzBuzz<N - 1>::str() + "\n" + std::to_string(N);
}
};
int main(int argc,char** argv)
{
auto spStr = FizzBuzz<47>::str();
std::cout << "Your Output: \n" << spStr;
getchar();
return 0;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。