通过 vuex 在 v-select 中显示数据（通过 axios）

Question

感谢阅读我的问题，我不会在 v-select 中通过 axios 显示类别（通过 vuetify）起初我使用 emit 但我必须搜索产品所以我决定使用 vuex 我不会用 vuex 这样做。我是这样做的：

我有 index.js、项目-module.js 和 CategoriesContainer.vue

    //index.js
import Vue from 'vue'
import Vuex from 'vuex'
import ItemModule from '../store/modules/item-module'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    getters:{},
    modules: {
        ItemModule,
        namespaced: true,

}
})

    //item-module.js
import axios from 'axios'
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);

const state = {
    items: [],
    searchWord: null,
    filteredItems: null,
};

const getters = {
    items: state => state.items,
    getSearchWord: (state) => state.searchWord,
    getFilteredItem: (state) => state.filteredItems,
};

const actions = {
    async loadItems({commit}) {
        axios
            .get('https://api.konimbo.co.il/v1/items?token=9c1a92bf8cefc59e4ec9fa7c53bba0f90dd8b15850bef1062dbf32c5e8fd3a08')
            .then(response => {
                commit('SET_Items', response.data)
                console.log(response.data)
            })
    }
};

const mutations = {
    SET_Items: (state, items) => (
    state.items = items
    )
};

export default {
    state,
    getters,
    actions,
    mutations
}

    //CategoriesContainer.vue
<template>
    <div>
        <v-container fluid grid-list-md >
            <v-layout column>
                <v-flex md1 d-flex color="primary">
                    <v-select v-model="category"
                              :items="uniqueCategory"
                              label="select category"
                    ></v-select></v-flex></v-layout>
        <v-card-text>
            <h2>{{this.category}}</h2>
            <Items :category="category" :info="info"></Items>
        </v-card-text>
        </v-container>
    </div>


</template>

<script>
    import Items from "../components/Items";
    import {mapState} from "vuex"
   // import axios from "axios";
    export default {
        name: 'CategoriesContainer',
        mounted() {
            this.$store.dispatch("loadItems");

            /*   axios
                    .get('https://api.konimbo.co.il/v1/items?token=9c1a92bf8cefc59e4ec9fa7c53bba0f90dd8b15850bef1062dbf32c5e8fd3a08')
                    .then(response => (this.info = response.data))
                    .catch(function (error) {
                        this.info = 'Error! Could not reach the API. ' + error
                    })*/
        },
        components:{
            Items},
        methods: {
            removeDuplicates: function (data) {
                return data.filter((value, index) => data.indexOf(value) === index);
            },
            showItems() {
                this.$emit('showItems',{category:this.category,info:this.info})
                console.log('message emit from child component')
            }
        },
        computed: {
            ...mapState(['items']),
            uniqueCategory: function () {
                let array = [];
                if (this.info == null) {
                    for (let item of this.items) {
                        if (item.store_category_title === "אבא") {
                            array.push(item.store_category_title_with_parent.parent_title);
                        } else
                            array.push(item.store_category_title);
                    }
                }
                return this.removeDuplicates(array);
            },

        },
        data() {
            return {
                info: undefined,
                category: '',
            }
        }/*,
    watch:{
      category(){
          this.$router.push({name:"item"},() => {this.category});
      }
    }*/
    }
</script>

<style scoped>
    #appx {
        max-width: 30em;
        margin: 1em auto;
    }

</style>

我得到的错误是： the error

我需要怎么做？

谢谢！

Answer 1

您应该将 Header.vue 中的 v-toolbar 替换为 v-app-bar，并将 CategoriesContainer.vue 中的 mapState 替换为 mapGetters。

通过 vuex 在 v-select 中显示数据（通过 axios）

Displays the data(by axios) in v-select by vuex

vue.js

axios

vuex

vuetify.js