vuex 状态不更新 UI 变化

Question

我正在将 vue2 项目转换为 vue3 项目，并注意到当我的 vuex 存储中的对象正在更新时，我的 UI 没有更新。以下是我创建商店的方式：

store/index.js

import {mutations} from './mutations';
import {createStore} from 'vuex'

export default createStore({
  state() {
    return {
       ...
    }
   },
   mutations
});

mutations.js

export const mutations = {
  narrative(state, v) {
    state.narrative = v;
  }
};

app.js

import { createApp } from 'vue';
import store from './store/index';

const app = createApp({
  mixins: [
    require('./mixins/base')
  ]
}).use(store)

所以当我改变其中一个 vuex 对象时，我立即写入控制台日志并看到数据已更改

        let narrative = _.find(this.$store.state.narratives, ['id', this.selectedNarrativeId]);
        if (narrative) {
          console.log(narrative.id); // PRINTS CORRECT UPDATED ID
          this.$store.commit('narrative', narrative);
          console.log(this.$store.state.narrative.id); // PRINTS CORRECT UPDATED ID
        }

但是UI没有改变。但是，如果我使用计算属性，UI 会立即更新。我对 vuex 商店做错了什么？

computed: {
    currentNarrative() {
        let narrative = _.find(this.$store.state.narratives, ['id', this.selectedNarrativeId]);
        if (narrative) {
          return narrative;
        }
        return {};
      },
}

版本

vue 3.2.33
vuex 4.0.2

Answer 1

用 import 替换 require + 重新启动机器解决了这个问题，也许服务器上仍然有一些损坏运行。

vuex 状态不更新 UI 变化

vuex state not updating UI on change

vuex

vuejs3