Vue.js 如何将JSON数据用于vuex存储（无网页包）

我成功地设置了我的第一个vuex存储。 数据数组从存储区传递到所需组件并正确呈现。 现在我想从JSON文件中获取数据，但无法使其正常工作。 我没有使用网页包，因为有时我需要在没有这些工具的环境中完成我的项目

在不从JSON文件检索数据的情况下，以下操作正在运行：

STORE.JS

SHOP.VUE

SHOP.VUE

---

我确信json文件的路径和axios的设置是正确的，因为我在不使用vuex存储的情况下成功地检索和呈现了json数据。

要在存储中设置变量，应该使用变量。 设置存储后，调用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();

---

类似的方法应该可以工作。

也可以简单地导入data.json文件，如下所示：

import data from './data';

export default new Vuex.Store({
    state: {
        test: data
    }
});

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

<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>

{
    "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
      }]
}

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();

import data from './data';

export default new Vuex.Store({
    state: {
        test: data
    }
});