存储在 Vuex 4 中 Vuejs 3 不起作用并显示空白结果

Question

最近我正在使用 Vuex 4 学习 Vue 3。我遵循 YouTube 中有关如何制作购物车的教程之一。从字面上看，我真的是 Vue 的新手。我刚开始从 Vue 3 学习它。同时本教程似乎使用 Vue 2。所以，将它从 Vue 2 更改为 Vue 3 有点困惑。当我访问根路由时，它显示一个空白的白色屏幕，没有任何错误信息。

应该是展示产品。我在存储数据时遇到问题。 这是我的代码：

main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import store from './store'

const app = createApp(App);

library.add(fas)

app.component('font-awesome-icon', FontAwesomeIcon)

app.config.productionTip = false

app.use(store).mount('#app')

存储/index.js

import { createApp } from 'vue'
import { createStore } from 'vuex'
import products from '../mock/products.json'

const app = createApp(App);

app.use(createStore);

export default createStore({
    state: {
        products: [],
        cart: [],
    },
    getters: {
        products: state => state.products,
        cart: state => state.cart,
    },
    actions: {
        getProducts({commit}) {
            commit('getProductData');
        },
    },
    mutation: {
        getProductData(state) {
            state.products = products;
        },
    },
})

模拟/products.json

[
  {
    "id": 1,
    "title": "Dell XPS 13 9380",
    "price": 1080,
    "imgUrl": "https://m.media-amazon.com/images/I/719tCHXNiXL._AC_UL320_.jpg"
  },
  {
    "id": 2,
    "title": "Apple 13 inch MacBook Air",
    "price": 799,
    "imgUrl": "https://m.media-amazon.com/images/I/51-oeeCf1zL._AC_UY218_.jpg"
  },
  {
    "id": 3,
    "title": "Lenovo IdeaPad 3",
    "price": 450,
    "imgUrl": "https://m.media-amazon.com/images/I/71MFkYd8TTL._AC_UY218_.jpg"
  },
  {
    "id": 4,
    "title": "Acer Spin 3 Convertible Laptop",
    "price": 176,
    "imgUrl": "https://m.media-amazon.com/images/I/81H9y1pPW6L._AC_UY218_.jpg"
  },
  {
    "id": 5,
    "title": "CHUWI HeroBook Pro 14.1 inch",
    "price": 269,
    "imgUrl": "https://m.media-amazon.com/images/I/71jDooDQHpL._AC_UY218_.jpg"
  },
  {
    "id": 6,
    "title": "Lenovo Ideapad L340",
    "price": 868,
    "imgUrl": "https://m.media-amazon.com/images/I/81XvT+ahkoL._AC_UY218_.jpg"
  },
  {
    "id": 7,
    "title": "HP 2020 Newest 17.3 Inch",
    "price": 699,
    "imgUrl": "https://m.media-amazon.com/images/I/61b7mU3bKbL._AC_UY218_.jpg"
  },
  {
    "id": 8,
    "title": "ASUS ROG Zephyrus Duo",
    "price": 3699,
    "imgUrl": "https://m.media-amazon.com/images/I/81e1pXhTE2L._AC_UY218_.jpg"
  },
  {
    "id": 9,
    "title": "Acer Aspire 5 Slim Laptop",
    "price": 579,
    "imgUrl": "https://m.media-amazon.com/images/I/71sesDsw95L._AC_UY218_.jpg"
  },
  {
    "id": 10,
    "title": "Alienware New M15",
    "price": 1799,
    "imgUrl": "https://m.media-amazon.com/images/I/7159o5Y0GIL._AC_UL320_.jpg"
  }
]

组件/ProductList.Vue

<template>
    <div>
        <div class="row match-height">
            <div 
                class="card"
                style="width: 15rem;"
                v-for="item in products"
                :key="item.id"
            >
                <div class="card-body text-start">
                <img :src="item.imgUrl" class="card-img-top" :alt="item.title" />
                    <h6 class="card-title pt-4">{{ item.title}}</h6>
                    <p class="card-text">
                        ${{ item.price }}
                    </p>
                    <a href="#" class="btn btn-primary">
                        <font-awesome-icon :icon="['fas', 'plus']" />
                        <span class="d-inline-block ms-2">Add to Cart</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // import products from '../mock/products.json'
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name: 'ProductList',
        computed: {
            ...mapGetters(['products']),
        },
        methods: {
            ...mapActions(['getProducts']),
        },
        mounted() {
            this.getProducts();
        },
    }
</script>

<style scoped>
    .card {
        border: none;
        padding: 20px;
    }
</style>

任何人都可以帮助检查我的代码，有什么问题，什么应该是真实的？ 提前谢谢你。

Answer 1

我建议你切换到 vue 3 compotition api，而不是在 vue3 中使用 vuex。使用非常简单，更先进