Vue Native：试图分配给只读属性答案

【问题标题】：Vue Native: attempted to assign to readonly propertyVue Native：试图分配给只读属性
【发布时间】：2020-04-08 19:40:01
【问题描述】：

对于那些不知道的人 - Vue Native 是 React Native 的包装器。您使用 VueJS 框架编写 React Native 应用程序。

问题：我正在尝试使用 AsyncStorage 存储一个 api 列表，但我收到一个错误“尝试分配给只读属性”。

api 列表如下所示：

apiList: [
    {name: "api1", url: "https://example_url1"}, 
    {name: "api2", url: "https://example_url2"},
]

用户可以将 API 添加到列表中。这是使用 VueX 动作完成的。如果 api 不在列表中，则添加（推送）。

[ADD_API](context, { name, url }) {
    let api = context.getters.getApiFromList(name);

    if (name && url && !api) {
        context.commit(APPEND_API_LIST, { name, url });

        // AsyncStorage.removeItem('apiList', () => {
        //     AsyncStorage.setItem('apiList', context.state.apiList)
        // });
        AsyncStorage.removeItem('APIs').then(() => {
            AsyncStorage.setItem('APIs', context.state.apiList);
        });
    }
},

当我添加 AsyncStorage 片段时发生错误。我对 React Native 很陌生，所以我不知道我做错了什么。

【问题讨论】：

因为它是只读的，所以我的第一个解决方案是不要强制存储，因为它是只读的，但我需要更改的是您的算法/模式？
但为什么它是只读的？你能详细说明一下吗？
我很高兴你知道了。我以前从未尝试过。我只能说你以错误的方式处理它。如果某些东西是只读的，问题就永远不会出现。

标签： react-native vue.js vuex asyncstorage

【解决方案1】：

这是我的疏忽。 docs 状态：

static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

简单地说 - 只有字符串可以使用 AsyncStorage 存储。在here 和here 之前已经解决了这个问题。

解决方法很简单：

AsyncStorage.removeItem('APIs').then(() => {
    AsyncStorage.setItem('APIs', JSON.stringify(context.state.apiList));
});

【讨论】：