使用Vue、Vuetify和Vuex创建全球快餐栏

vue create global-fast-food-bar
cd global-fast-food-bar

vue add vuetify

npm install vuex@next --save

import { createStore } from 'vuex';

export default createStore({
state() {
return {
menuItems: []
};
},
mutations: {
setMenuItems(state, items) {
state.menuItems = items;
}
},
actions: {
fetchMenuItems({ commit }) {
// 假设这里是从API获取数据
const items = [
{ id: 1, name: 'Burger', category: 'American' },
{ id: 2, name: 'Sushi', category: 'Japanese' },
// 更多项...
];
commit('setMenuItems', items);
}
},
getters: {
menuItems: state => state.menuItems
}
});

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import vuetify from './plugins/vuetify';

const app = createApp(App);
app.use(store);
app.use(vuetify);
app.mount('#app');

<template>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4" v-for="item in menuItems" :key="item.id">
<v-card>
<v-card-title>{{ item.name }}</v-card-title>
<v-card-text>{{ item.category }}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
computed: {
...mapGetters(['menuItems'])
},
created() {
this.$store.dispatch('fetchMenuItems');
}
};
</script>

<template>
<v-app>
<menu-item-list></menu-item-list>
</v-app>
</template>

<script>
import MenuItemList from './components/MenuItemList.vue';

export default {
components: {
MenuItemList
}
};
</script>