升级到Vue 2.7，现在得到一堆警告：[Vue警告]：VUE 2不支持ReadOnly Arrays

Question

背景

我最近通过以下本指南从VUE v2.6.14升级为VUE 2.7： https://blog.vuejs.org/posts/vue-2-7-naruto.html 。

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

问题

应用程序大部分负载，但是现在我得到了大量的控制台错误：

[vue warn]：vue 2不支持ReadOnly阵列。

看起来甚至看起来像Just 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/store/模块/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/stay/store/store/pockpace/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 /momodules/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.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，而getter是只读的。如您引用的博客 VUE 2.7中的数组不支持：

readonly（）确实创建了一个单独的对象，但是它不会跟踪新添加的属性，在数组上不起作用。

它（部分）支持 vue 2.6 coption Api插件虽然：

ReadOnly（）仅提供类型级别的READONLY检查。

因此，这可能导致错误。如果对您来说是强制性的，则可能需要升级到VUE3，或者持续一段时间。保留组成的API插件直到今年年底...

解决方法可能是跳过Getter并直接访问状态，因为这是一个非常简单的Getter，仅返回Workspaces 。

希望这会有所帮助。

Answer 2

找到了解决方案，该解决方案仅升级到[email＆nbsp; procectived] href =“ https://github.com/greenpress/vuex-composition-helpers” rel =“ nofollow noreferrer”> https://github.com/greenpress/vuex-composition-helpers 。