Vue2 + Vuex - 不是在存储中成功设置的渲染数组

Question

我正在尝试渲染 209,579 个选项，但我认为我没有正确使用 Vuex 生命周期 + axios

• 我在控制台中通过 Vuex 看到商店状态中设置的所有选项。
• 不显示任何错误
• 选项为空且未呈现数组cityNames状态
• main.js将存储导出到所有组件

我认为我没有正确应用此生命周期，我应该在这里使用 getter，有人可以为我的生命周期带来秩序吗？

商店.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
        isTrue: true,
        cityNames: [],
    },
    getters:{
        getCityNames(state){
            return state.cityNames;
        }
    },
    mutations: {
        SetCityNames(state, cityNames){
            state.cityNames = cityNames
    },
    actions: {
        loadData({commit}){
            axios.get('http://localhost:3000/allCities')
                .then(function (response) {
                    commit('SetCityNames', response.data)
                }).catch(function (error) {
                    console.log(error);
            });
        }
    },
});

脚本

export default {
    name: "Weather",
    methods: {
        allCityNames() {
            this.$store.dispatch('loadData')
        }
    },
    created() {
        this.allCityNames();
    }
}

模板

<select>
    <option disabled value="">Please select one</option>
    <option v-for="cityName in $store.cityNames">{{cityName}}</option>
</select>

谢谢 芽

Answer 1

我已经将我的代码更改为从计算执行，只是为了找出错误(最后！(：maximum stacksize exceeded，在这一点上，我明白 Vue 不允许我渲染如此庞大的数组(209,579 个项目(进入视图。

第一部分 - 代码更改：

我创建了一个 isLoaded 状态，该状态设置为一旦 axios 提交它的响应true，

由于 axios 调用的异步性质，我仍然不确定这是否是最好的方法，它可能没有完成 commit('SetCityNames', response.data); 并且在调用提交后，它会调用下一个：commit('changeLoadedState');

所以我添加了状态：isLoaded: false

添加了一个 getter：didItLoad(state){return state.isLoaded}

增加了一个突变：changeLoadedState(state){state.isLoaded = true}

在我的 Axios 调用中操作中添加了一个提交 (commit('changeLoadedState');(：

loadData({commit}) {
            axios.get('http://localhost:3000/allCities')
                .then(function (response) {
                    commit('SetCityNames', response.data);
                    commit('changeLoadedState');
                }).catch(function (error) {
                console.log(error);
            });
        }

在我的组件中，我仍然在调度 axios 调用方法，因为它首先被调用，并为渲染端添加了一个computed方法，如下所示：

computed:{
          isLoaded(){
              return this.$store.getters.didItLoad;
          },
            renderCities(){
                return this.$store.getters.getCityNames;
            }
        }

在我的渲染模板中，我首先检查我的选择加载状态，然后才填充选项：

<select v-if="isLoaded">
    <option disabled value="">Please select one</option>
    <option v-for="cityName in renderCities">{{cityName}}</option>
</select>

第 II 部分 - 更改有效负载大小

因此，在正确设置代码后，我进入了我的节点快速服务器并将路由的循环更改为停止在 1000 个项目，并且都运行良好。

在这一点上，我很好奇如果我开始添加零会发生什么，所以在 10K 项目时，加载选项需要 1-2 秒，打开下拉列表开始显示由于压力而导致的延迟迹象，在 50K 项目时大约需要 5 秒才能打开下拉列表。

底线

问题不在于数组的大小，Vuex 的工作非常出色，在 ~800 毫秒内获得了 209,579 个项目数组，其中包括 Express 的后端解析.js(我的整个堆栈都是本地的，所以没有网络延迟(。

我将尝试创建一个自动完成功能，该自动完成功能将从第 2 个或第 3 个字符开始列出。

感谢回复的成员。

Answer 2

你有一个名为 getCityNames 的 getter。这是$store.getters.getCityNames不$store.cityNames.

所以改变

<option v-for="cityName in $store.cityNames">{{cityName}}</option>

自

<option v-for="cityName in $store.getters.getCityNames">{{cityName}}</option>

最好重构以使用计算属性，而不是在模板中内联。

<option v-for="cityName in cityNames">{{cityName}}</option>
//script
computed: {
    cityNames() {
        return this.$store.getters.getCityNames;
    }
}