i have an array of products
const products = [
{ id: 1, productname: "64GB Phone", qty: 1, price: 33070, image:
require('../assets/phone.png') },
i have added this into 3 files is their any way i can declare this in one file & call it in 3 files without writing the whole array ?
One valid pattern is to use mixins:
import { reusableMixin as products } from "@/mixins/reusableMixin"
const component = {
mixins: [
products
],
data(){
return {...}
},
...
}
___________________________
export const reusableMixin = {
data(){
return {
products: [...]
}
}
// or when piping
computed:{
products_piped: {
get(){
return getFromAnywhereSync()
},
set(val){
setSomeWhere(val)
}
}
}
}
If you want to make changes on this array and all pages get that change then import is not the correct way because if you change it in one component the other component will not take that change. if you want something like this you have to add it in store (vuex) tell us exacly what do you need it for to help you ^^
You can set a prototype in your main.js file as follows:
Vue.prototype.$products = {
id: 1, productname: "64GB Phone", qty: 1, price: 33070, image:
require('../assets/phone.png')
};
Then, use this.$products within your Vue components.
(You have an erroneous open square bracket here: const products = [ in your example)
store.jsfor global data states or usingVuex.