Outputting data for list from data array with vuex (store.js)?

Question

Vue.js

There is a small vue project codesandbox
A database was created in firebase from where I pull data to display the product
firebase list:

const config = {
  ...
};

firebase.initializeApp(config);

// firebase utils
const db = firebase.firestore();

// firebase collections
const usersCollection = db.collection("users");
const locationsCollection = db.collection("locations");

export { firebase, db, usersCollection, locationsCollection };

store.js:

import { firebase, locationsCollection } from "@/firebase";

export default new Vuex.Store({
  state: {
    appTitle: "Landing Page",
    locations: []
  },
  mutations: {
    setLocations(state, payload) {
      state.locations = payload;
    },
    setUserLocations(state, payload) {
      state.userLocations = payload;
    }
  },
  actions: {
    async getLocations({ state, commit }) {
      locationsCollection
        .get()
        .then(querySnapshot => {
          let locationsArray = [];

          querySnapshot.forEach(doc => {
            let location = doc.data();
            location.id = doc.id;
            locationsArray.push(location);
          });

          commit("setLocations", locationsArray);
        })
        .catch(() => {
          commit("setLocations", []);
        });
    },
    addLocation({ state }, payload) {
      firebase
        .database()
        .ref()
        .child("/locations")
        .push(payload);

      //console.log(payload);
    },
    getUserLocations({ state, commit }) {
      return firebase
        .database()
        .ref("/locations")
        .once("value", snapshot => {
          commit("setUserLocations", snapshot.val());
        });
    }
  },
  getters: {}
});

Question: There is a data.json file in the project. How is it possible in a similar way, only not from firebase, but from a json file or just from an array to "pull" data for product ?

Answer 1

Import arr from "./test.json"