组合 API 状态管理不是被动的

Question

我正在使用组合 api 进行状态管理，但它不是反应式的。

这是我的商店文件：

import { readonly, reactive } from "@vue/reactivity";
const state = reactive({
    lang: "en",
    page: 1,
    words: [
        {
            word: "Hello",
            repeat: 92,
            sentences: [],
        },
        { word: "Love", repeat: 128 },
        { word: "Good", repeat: 50 },
        { word: "New", repeat: 12 },
        { word: "Hello", repeat: 12 },
        { word: "Love", repeat: 12 },
        { word: "Good", repeat: 12 },
        { word: "New", repeat: 12 },
        { word: "Hello", repeat: 12 },
        { word: "Love", repeat: 12 },
        { word: "Good", repeat: 12 },
        { word: "New", repeat: 12 },
        { word: "Hello", repeat: 12 },
        { word: "Love", repeat: 12 },
        { word: "Good", repeat: 12 },
        { word: "New", repeat: 12 },
    ],
});

const methods = {
    changePage(i: number): void {
        state.page = i;
    },
    emptyTheList() {
        state.words = [];
    },
};

export default { state, methods };

这是一个正在使用注入存储的组件：

<template>
    <div class="btn-group bg-gray-50 mt-6 pt-6 pb-6 flex justify-center">
        <button class="btn" :id="wordsInfo.state.page">&#60;&#60;</button>
        <button
            class="btn"
            v-for="i in numberOfPages"
            v-bind:key="i"
            :class="page === i && 'btn-active'"
            @click="changePage(i)"
        >
            {{ i }}
        </button>
        <button class="btn">&#62;&#62;</button>
    </div>
</template>
<script>
import { ref, computed, inject } from "vue";

export default {
    name: "WordCardsPagination",
    props: {
        func: Function,
    },
    setup(props, context) {
        console.log(props.func);
        const wordsInfo = inject("wordsInfo");
        const numberOfPages = computed(() => {
            return Math.ceil(wordsInfo.state.words.length / 12);
        });
        const page = ref(wordsInfo.state.page);

        const changePage = (i) => {
            wordsInfo.methods.changePage(i);
            page.value = wordsInfo.state.page;
        };
        return {
            numberOfPages,
            wordsInfo,
            page,
            changePage,
        };
    },
};
</script>

上面的代码运行没有问题，但如果使用 wordsInfo.state.page 而不是 page，页面引用将被删除：

<button
            class="btn"
            v-for="i in numberOfPages"
            v-bind:key="i"
            :class="wordsInfo.state.page === i && 'btn-active'"
            @click="wordsInfo.methods.changePage(i)"
        >
            {{ i }}
        </button>

即使 console.log 显示值已更改，组件也不再具有反应性

Answer 1

嗯，我不是 100% 确定这应该是一个答案，但也许它会在未来帮助一些人...

在这种情况下，问题出在“商店”文件中使用的导入 - import { readonly, reactive } from "@vue/reactivity" 而应用程序的其余部分使用 import { ... } from 'vue'

因此，“商店”使用的 Vue 模块（反应性代码）与应用程序的其余部分不同。在不了解更多 OP 设置的情况下很难确切地说出原因，但根据经验，请尽量坚持使用 import { xx } from "vue"，不要混淆！

组合 API 状态管理不是被动的

Composition API State Management is not reactive

javascript

state-management

vuejs3