Question

我试图在App.vue中获取数据，然后将该值传递给this.store.data。之后，我可以将this.store.data值用于所有其他组件。问题是当我单击链接（router-link）时，组件内部的功能在获取应用程序中的数据之前运行。无论如何，我可以解决这个问题吗？如何获取数据并用于所有其他组件？

这是store.js的代码：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
      senator: [],
  },
  mutations: {},
  actions: {}
});

这是App.vue中的获取数据代码：

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
    components: {Header, Footer},
    data(){
        return {
            senatorA: [],
        }
    },
    created: function(){
        this.getData();
    },
    methods: {
        getData() {
            let pathSenate = 'senate';
            let url = '';
            let currentPage = window.location.href;
            if (currentPage.includes(pathSenate)) {
                url = 'https://api.myjson.com/bins/1eja30';

            } else {
                url = 'https://api.myjson.com/bins/j83do';
            }
            fetch(url)
                .then(response => response.json())
                .then((jsonData) => {
                    let data = jsonData;
                    this.senatorA = data.results[0].members;
                    this.senatorA.forEach(mem => {
                        mem.fullname = (mem.first_name + ' ' + mem.middle_name + ' ' + mem.last_name).replace(null, '');
                    });
                    this.$store.state.senator = this.senatorA;
                    console.log(this.$store.state.senator)
                });
        },
    }
}

以下是组件中的代码，以便从App.vue中的提取功能获取数据：

<script>
import DataTable from './DataTable'
export default {
    name: "FilterData",
    components: {DataTable},
    data () {
        return {
            senatorF: this.$store.state.senator,
            checkarr: [],
            selectarr: '',
            statearr: [],
            searchName: '',
            tempt: [],
        }
    },
    created: function(){
        this.getStates();
    },
    computed: {
        displayParty() {
            if (this.checkarr.length == 0 && this.selectarr == '') {
                return this.searchData(this.senatorF);
            } else if (this.checkarr.length != 0 && this.selectarr == '') {
                this.tempt = this.senatorF.filter(j => this.checkarr.includes(j.party));
                return this.searchData(this.tempt);
            } else if (this.selectarr != '' && this.checkarr.length == 0) {
                this.tempt = this.senatorF.filter(j => this.selectarr.includes(j.state));
                return this.searchData(this.tempt)
            } else {
                let  memFilter= [];
                for (let j = 0; j < this.senatorF.length; j++) {
                    for (let i = 0; i < this.checkarr.length; i++) {
                        if (this.senatorF[j].party == this.checkarr[i] && this.senatorF[j].state == this.selectarr) {
                            memFilter.push(this.senatorF[j]);
                        }
                    }
                }
                return this.searchData(memFilter);
            }
        },
    },
    methods: {
        getStates: function () {
            console.log(this.senatorF)
            this.senatorF.forEach(mem => {
                if (!this.statearr.includes(mem.state)) {
                    this.statearr.push(mem.state);
                    console.log('addrow')
                }
            });
        },
        searchData: function(array){
            return array.filter(mem => mem.fullname.toLowerCase().includes(this.searchName.toLowerCase()) || mem.votes_with_party_pct.toString().includes(this.searchName.toLowerCase()))
        }
    },
};

这是控制台中的结果： console result show the function in component run before the fetching data in App.vue

Answer 1

您取得了一些不错的进步。下一步是按照Vuex中的正确流程“更新”您的商店。在您的App.vue中，您拥有getData()方法，该方法最终会执行fetch()，并且您尝试使用this.$store.state.senator = this.senatorA设置商店数据。这是不正确的。您应该遵循Vuex的单向数据流结构。

您正试图直接更改状态，而无需先将更改提交给突变，然后突变会直接影响状态。我知道这看起来似乎很多，甚至Vue的创建者Evan You也表示他想简化。

首先，您应该执行this.$store.state.senator = this.senatorA这样的Vuex调度，而不是进行this.$store.dispatch('storeActionFunction', this.senatorA)。

在Vuex Store文件中，您应该有一个“操作”（函数），该函数随后将调用commit。您的提交可能看起来像commit('SET_SENATAOR_SOMETHING', data)。 data代表您通过分派传递的this.senatorA。

commit()有2个参数...您要定位的Mutation名称和您想要传递的数据。然后，您将在Vuex商店中有一个部分，用于指定Mutations。然后，名为'SET_SENATAOR_SOMETHING'的变异将获取传递给它的数据，并执行类似... state.senator = data的操作。

景气。做完了看起来很多，但确实如此。如果您想查看一些示例文件，则可以在下面链接一个项目，但是我的项目被抽象出来的程度比您想要的要大。

州：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/store/modules/people/state.js

发送：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/views/people/layouts/layout.vue

操作：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/store/modules/people/actions.js

突变：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/store/modules/people/mutations.js

字母：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/store/modules/people/getters.js

带有{ mapGetters }的访问数据（不是必需的）：https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/views/people/index.vue

希望这会有所帮助！

无法使用Vuex来获取所有组件的数据

1 个答案: