主页 / 问题 / 1033993
Accepted
HamSter
Asked:2020-10-13 01:27:24 +0000 UTC2020-10-13 01:27:24 +0000 UTC

使用 vuex (store.js) 从数据数组中输出列表数据

  • 772

有一个小的vue codeandbox项目

在 firebase 中创建了一个数据库，我从中提取数据以显示产品列表

火力基地：

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 };

商店.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: {}
});

问题：项目中有一个data.json文件。怎么可能以类似的方式，不仅不是来自firebase，而是来自一个json文件或只是从一个数组来“拉”产品的数据？

PS：这个问题没有解决我的问题并且不相关

vue.js

1 个回答

  1. Best Answer

    我会这样做： store.js

    import Vue from "vue";
import Vuex from "vuex";
//import axios from "axios";
import { firebase, locationsCollection } from "@/firebase";
import  data  from "./data.json";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    appTitle: "Landing Page",
    locations: getLocations(data.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: {}
});

function getLocations(data) {
  let locationsArray = [];
  data.forEach((doc, index) => {
    let location = doc.location;
    location.id = index;
    locationsArray.push(location);
  });
  return locationsArray;
}

    有了这样的问题陈述，您就不需要突变或操作。一切都将在初始化期间形成。显示在获取位置的示例中。什么getUserLocations- 我不明白。自己重写它的逻辑。

    • 1

相关问题