如何在 vuex 存储中使用 JSON 数据（无 webpack）

Question

我成功设置了我的第一个 vuex 商店。数据数组从存储传递到所需的组件并正确呈现。现在我想从 JSON 文件获取数据，但无法让它工作。我没有使用 webpack，因为有时我需要在这些工具不可用的环境中处理我的项目。

以下内容无需从 JSON 文件检索数据即可运行：

商店.JS

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [
            { name: "Avocado Zwem Ring", inventory: 47, unit_price: 77, image:"a.jpg", new:true },
            { name: "Danser Skydancer", inventory: 5, unit_price: 45.99, image:"a.jpg", new:true}
        ]
    },
});

商店.VUE

<template>
    <comp-products v-bind:products="products"></comp-products>
</template>
<script>
module.exports = {
    components: {
        'comp-products': httpVueLoader('components/comp-products.vue')
    },
    computed:{
        products(){ 
            return this.$store.state.products
        }
    }
}
</script>

我已尝试以下操作，但它不会呈现任何内容，但也不会返回错误。

商店.JS

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [], 
    },
    mounted() {
        axios
        .get("json/products.json")
        .then(response => {
            this.products = response.data.products;
        })            
    },
});

商店.VUE

<template>
    <comp-products v-bind:products="products"></comp-products>
</template>
<script>
module.exports = {
    components: {
        'comp-products': httpVueLoader('components/comp-products.vue')
    },
    computed:{
        products(){ 
            return this.$store.state.products
        }
    }
}
</script>

产品.json

{
    "products":[
      {
        "sku":"1",
        "name": "Danser Skydancer",
        "inventory": 5,
        "unit_price": 45.99,
        "image":"a.jpg",
        "new":true
      },
      {
        "sku":"2",
        "name": "Avocado Zwem Ring",
        "inventory": 10,
        "unit_price": 123.75,
        "image":"b.jpg",
        "new":false
      }]
}

我确信 json 文件的路径和 axios 的设置是正确的，因为我设法在不使用 vuex 存储的情况下检索和渲染 json 数据。

Answer 1

要在商店中设置变量，您应该使用突变。设置商店后，调用您的 api，然后使用结果数据调用商店上的突变。

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [], 
    },
    mutations: { //Mutations are like setters
        SET_PRODUCTS: (state, products) => { //capitalization is good-practice for vuex-mutations
            state.products = products;
        }
    }
});

const setProductToStore = () => {

    axios
    .get("json/products.json")
    .then(response => {
        store.commit('SET_PRODUCTS', response.data.products);
    })   
}

setProductToStore();

像这样的东西应该有效。