为什么在Vue组件中使用Akita的select后数据不更新？

西门立顺提问于 2026-01-25 21:13:22 阅读 39

框架

在用Akita管理Vue组件状态时遇到了奇怪的问题，我在store里定义了select，但页面数据一直没变。比如下面这个组件：


<template>
  <div>{{ selectedItem?.name }}</div>
</template>

<script>
import { useStore } from '@/store';

export default {
  computed: {
    selectedItem() {
      return useStore().select('selectedItem');
    }
  }
}
</script>

当我通过store.set({ selectedItem: newItem })修改数据后，控制台能看到store里的值变了，但页面就是不更新。试过在mounted里手动调用this.$forceUpdate()也不行，这是哪里出问题了？

我来解答赞 9 收藏

反馈

2 条解答

夏侯馨予 Lv1

问题出在你直接用了 Akita 的 select 方法，但没把它转成响应式数据。Vue 需要显式地监听变化，你得用 map 或 pipe 把它变成计算属性能理解的形式。

我之前这样搞的，改下你的代码：

import { useStore } from '@/store';

import { computed } from 'vue';



export default {

  setup() {

    const store = useStore();

    const selectedItem = computed(() => store.selectSnapshot('selectedItem'));

    return { selectedItem };

  }

}

用 selectSnapshot 直接拿值，Vue 就能正确监听变化了。记得改成 setup 写法，更简洁。

2026-02-02 10:03

Code°康帅 Lv1

问题在于你直接返回了 Akita 的 select 结果，但 Vue 无法自动检测到这个变化。你需要用 map 把数据转成一个响应式对象。

修改后的代码：

import { useStore } from '@/store';



export default {

  computed: {

    selectedItem() {

      return useStore().select(state => state.selectedItem);

    }

  }

}

如果还不行，确保 Akita 的 store 是用 VueAkitaPlugin 初始化的。

2026-01-29 18:09