Где хранить данные в Vue.js?

Question

Задумка была импортировать компонент, имеющий только export default, без <template>. Но как и ожидалось, выдало ошибку. Подскажите, где хранить данные, не поступающие с бд, пока что, они в папке с проектом лежат постоянно.

data() {
    return {
      products: [{
          name: "Hoodie",
          index: 1,
          sale: "17,57$",
          src: require('@/assets/images_products/Hoodies/Hoodie_4.jpg')
        },
        {
          name: "Hoodie",
          index: 2,
          sale: "17,57$",
          src: require('@/assets/images_products/jeans/Jeans_1.jpg')
        },
        {
          name: "Hoodie",
          index: 3,
          sale: "17,57$",
          src: require('@/assets/images_products/T-shirt/Tshirt_4.jpg')
        },
        {
          name: "Hoodie",
          index: 4,
          sale: "17,57$",
          src: require('@/assets/images_products/T-shirt/Tshirt_1.jpg')
        }
      ]
    }

Answer 1

Если посмотреть данные, то когда-нибудь они будут идти из апишки с сервака, так что положите сразу в vuex и потом переделывать не придется.

state: {
  products: [/* ваши данные */]
},
getters: {
  getProducts: (state) => (state.products),
},

А в компонентах где вам нужны ваши продукты вешаете

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getProducts',
    ])
  }
};

Все, у вас в компоненте есть переменная getProducts. В геттерах можно (и даже нужно) описать всякие сортировки и потом дёргать в mapGetters уже их и выводить товары в разделах "Горячее предложение" и т.п.

Answer 2

Для хранения статических данных в Vue.js проекте, которые пока не поступают из базы данных, вы можете использовать следующие подходы:

Вынести данные в отдельный файл Вы можете создать отдельный JavaScript или JSON файл в проекте, чтобы хранить данные. Это позволит разделить логику компонента и данные, и в случае необходимости легко обновлять их.

Пример: Создайте файл products.js в папке src/data/:

// src/data/products.js
export default [
  {
    name: "Hoodie",
    index: 1,
    sale: "17,57$",
    src: require('@/assets/images_products/Hoodies/Hoodie_4.jpg')
  },
  {
    name: "Hoodie",
    index: 2,
    sale: "17,57$",
    src: require('@/assets/images_products/jeans/Jeans_1.jpg')
  },
  {
    name: "Hoodie",
    index: 3,
    sale: "17,57$",
    src: require('@/assets/images_products/T-shirt/Tshirt_4.jpg')
  },
  {
    name: "Hoodie",
    index: 4,
    sale: "17,57$",
    src: require('@/assets/images_products/T-shirt/Tshirt_1.jpg')
  }
];

Затем импортируйте эти данные в компонент:

<script>
import products from '@/data/products';

export default {
  data() {
    return {
      products
    };
  },
};
</script>

Использовать Pinia или Vuex для хранения данных Если планируете часто обращаться к этим данным из разных компонентов, лучше использовать глобальное хранилище, например Pinia или Vuex. Пример с Pinia:

// store/productStore.js import { defineStore } from 'pinia';

export const useProductStore = defineStore('product', { state: () => ({ products: [ { name: "Hoodie", index: 1, sale: "17,57$", src: require('@/assets/images_products/Hoodies/Hoodie_4.jpg') }, // другие товары... ], }), });

Импортируйте хранилище в компонент:

<script>
import { useProductStore } from '@/store/productStore';

export default {
  setup() {
    const productStore = useProductStore();
    return {
      products: productStore.products,
    };
  },
};
</script>

Использовать JSON-файл Если у вас только данные без сложной логики, вы можете создать JSON-файл и импортировать его.

Пример: Создайте файл products.json в папке src/data/:

[
  {
    "name": "Hoodie",
    "index": 1,
    "sale": "17,57$",
    "src": "@/assets/images_products/Hoodies/Hoodie_4.jpg"
  },
  {
    "name": "Hoodie",
    "index": 2,
    "sale": "17,57$",
    "src": "@/assets/images_products/jeans/Jeans_1.jpg"
  }
]

Затем импортируйте его:

<script>
import products from '@/data/products.json';

export default {
  data() {
    return {
      products: products.map(product => ({
        ...product,
        src: require(`${product.src}`)
      })),
    };
  },
};
</script>

Выбор способа хранения зависит от того, как часто меняются данные и как вы планируете их использовать в проекте.

БЛОГ НА HUSL

Где хранить данные в Vue.js?

Ответы (2 шт):