How do I use JSON data with vuex store (no webpack)

Question

I managed to setup my first vuex store successfully. An array of data is passed from the store to the desired component and rendered correctly. Now I'd like to get my data from a JSON file, but cant get it to work. I am not making use of a webpack, because sometimes I need to work on my project in an environment where these tools are not available.

The following, without retrieving data from a JSON file is working:

STORE.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}
        ]
    },
});

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

I have tried the following but it does not render anything but also does not return an error.

STORE.JS

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

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

products.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
      }]
}

I am sure that the path to the json file and the setup of axios is correct because I managed to retrieve and render the json data without making use of the vuex store.

MichelleFuchs MichelleFuchs · Accepted Answer · 2019-05-10T11:03:03

For setting variables in the store you should use mutations. After setting up the store call your api and then call the mutation on the store with the resulted data.

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

Something like this should work.

How do I use JSON data with vuex store (no webpack)

2 Answers