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

Posted 2023-02-16

【中文标题】存储在 Vuex 4 中 Vuejs 3 不起作用并显示空白结果

【英文标题】：Store in Vuex 4 Vuejs 3 is not working and show the blank result

【发布时间】：2021-12-21 03:37:14

【问题描述】：

最近我正在使用 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" : />
                    <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>

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

【参考方案1】：

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