组合 API 状态管理不是反应式的答案

【问题标题】：Composition API State Management is not reactive组合 API 状态管理不是反应式的
【发布时间】：2021-08-25 01:43:03
【问题描述】：

我正在使用组合 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而不是wordsInfo.state.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 显示值已更改

【问题讨论】：

您正在商店中导入reactive，但实际上并没有在任何地方使用它。这是故意的吗？
@MichalLevý 我确实使用了它，但没有任何区别，当我尝试不同的解决方案时将其删除。
为什么要从ref 中创建ref？由于响应式遍历对象，直到它具有标量值并将ref 放在它的位置。所以wordsInfo.state.page 已经是ref，你再把它贴在ref 中。或者，也许我现在弄错了什么。我可能在想toRefs。
应该的。我看不出有什么问题。除了代码是尝试解决方案的奇怪组合。也许你应该清理它并创建可运行的Minimal, Reproducible Example ...例如在 Codesandbox/Codepen
这是一个长镜头，可能不是问题，但以防万一......尝试始终从“vue”而不是“@vue/reactivity”导入（就像在你的商店中一样）跨度>

标签： javascript vuejs3 state-management

【解决方案1】：

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

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

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

【讨论】：