index.js

const Home = {
	template: `
		<div>
			<div v-if="loading">
				Loading…
			</div>
			<ol>
				<li v-for="product in products">
					<router-link style="display: block;" v-bind:to="getProductURL(product.id)">
						<div>
							{{product.product}}
						</div>
						<div>
							{{product.description}}
						</div>
					</router-link>
				</li>
			</ol>
		</div>
	`,
	methods: {
		...mapActions([
			'fetchProducts',
		]),
		getProductURL(id) {
			return `/products?id=${id}`;
		},
	},
	created() {
		if (!this.products.length) {
			this.fetchProducts();
		}
	},
	computed: {
		products() {
			return this.$store.getters.products;
		},
		loading() {
			return this.$store.getters.loading;
		},
	},
};