Using Vue-Router Dynamic Routes to Load Data Chapter 9
Create a state and mutations object in your store. Add a key of products as an object in
the state, and create a function in the mutations object, also titled products. The
mutation should accept two parameters – the state and a payload:
const store = new Vuex.Store({
state: {
products: {}
},
mutations: {
products(state, payload) {
}
}
});
Update the state.products object to the contents of the payload:
const store = new Vuex.Store({
state: {
products: {}
},
mutations: {
products(state, payload) {
state.products = payload;
}
}
});
Replace the console.log in the main Vue instance with a commit function, calling the
new mutation and passing in the formatted product data:
new Vue({
el: '#app',
store,
router,
created() {
CSV.fetch({url: './data/csv-files/bicycles.csv'}).then(data => {
let products = this.$formatProducts(data);
this.store.commit('products', products);
});
}
});