升级到 Vue 2.7，现在收到一堆警告：[Vue warn]: Vue 2 does not support readonly arrays

Question

背景

我最近按照以下指南从 Vue v2.6.14 升级到 Vue 2.7： https ://blog.vuejs.org/posts/vue-2-7-naruto.html。

我做了一些更改（例如，删除@vue/composition-api和vue-template-compiler ，升级到vuex-composition-helpers@next等）。

问题

该应用程序大部分时间都在加载，但现在我收到大量控制台错误：

[Vue warn]: Vue 2 does not support readonly arrays.

看起来甚至只是console.log(workspaces.value); （参见下面的代码）引发警告。

问题

我该如何解决这个问题？

谢谢！

代码

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    computed,
  } from 'vue';
  import { createNamespacedHelpers } from 'vuex-composition-helpers';
  import {
    modules,
    actionTypes,
    getterTypes,
  } from '@/store/types';
  import _ from 'lodash';

  const workspaceModule = createNamespacedHelpers(modules.WORKSPACE_MODULE);

  export default defineComponent({
    setup() {
      const { newWorkspace, listWorkspaces } = workspaceModule.useActions([
        actionTypes.WorkspaceModule.NEW_WORKSPACE,
        actionTypes.WorkspaceModule.LIST_WORKSPACES,
      ]);
      const { workspaces } = workspaceModule.useGetters([
        getterTypes.WorkspaceModule.GET_WORKSPACES,
      ]);
      onMounted(async () => {
        await listWorkspaces({
          Archived: false,
          Removed: false,
        });
        console.log(workspaces.value);
      });
      return {
        /*
        workspacesSorted: computed(() => {
          return _.orderBy(workspaces.value, ['LastUpdated'], ['desc']);
        }),
        */
      }
    }
  });
</script>

src/store/modules/workspace/getters.ts

import { GetterTree } from 'vuex';
import { WorkspaceState } from './types';
import { RootState } from '../../types';
import { getterTypes } from '../../types';

export const getters: GetterTree<WorkspaceState, RootState> = {
  [getterTypes.WorkspaceModule.GET_WORKSPACES](context: WorkspaceState) {
    return context.Workspaces;
  },
  [getterTypes.WorkspaceModule.GET_ALL_WORKSPACES](context: WorkspaceState) {
    return context.AllWorkspaces;
  }
}

src/store/modules/workspace/actions.ts

export const actions: ActionTree<WorkspaceState, RootState> = {
  async [actionTypes.WorkspaceModule.LIST_WORKSPACES]({ commit }, payload: ListWorkspace) {
    const wss = await list(payload.Archived, payload.Removed);
    wss.forEach((ws) => {
      ws.Archived = payload.Archived;
      ws.Removed = payload.Removed;
    });
    commit(mutationTypes.WorkspaceModule.SET_WORKSPACES, wss);
  },
};

src/store/modules/workspace/actions.ts

export const mutations: MutationTree<WorkspaceState> = {
  [mutationTypes.WorkspaceModule.SET_WORKSPACES](ctx: WorkspaceState, wss: Workspace[]) {
    ctx.Workspaces = wss;
  },
};

src/service/useWorkspace.ts

  const list = async(archived: boolean, removed: boolean) => {
    const res = await get<Workspace[], AxiosResponse<Workspace[]>>('/workspace/list', {
      params: {
        archived,
        removed,
      }
    });
    return success(res);
  };

当我直接（在控制台或计算中）调用store.state.WorkspaceModule.Workspaces时，我没有收到任何错误：

import { useStore } from '@/store';

export default defineComponent({
  setup() {
    const store = useStore();
      onMounted(async () => {
        await listWorkspaces({
          Archived: false,
          Removed: false,
        });
        console.log(store.state.WorkspaceModule.Workspaces);
      });
      return {
        workspacesSorted: computed(() =>
          store.state.WorkspaceModule.Workspaces
        ),
      }
    }
  });

Answer 1

这可能是因为workspaces基于只读的 getter。 如您所指的博客中所述，Vue 2.7 中的数组不支持只读：

readonly() 确实创建了一个单独的对象，但它不会跟踪新添加的属性并且不适用于数组。

Vue 2.6 Composition Api 插件中的数组（部分）支持它：

readonly() 仅提供类型级别的只读检查。

所以这可能会导致错误。 如果它对您来说是强制性的，您可能需要升级到 vue3，或者坚持使用 2.6 一段时间。 组合Api插件维护到今年年底...

一种解决方法可能是跳过 getter 并直接访问状态，因为它是一个非常简单的 getter，它只返回Workspaces的当前状态。

希望这可以帮助。