好的,我有两个不同的组件,每个组件都会收到Axios响应。但是我不想单独获取每个组件中的数据。那是不对的,它导致组件单独运行...
我对代码进行了一些更改,但是仍然存在一些问题。我正在Store.js
中使用Vuex进行axios调用,并将其导入到我的组件中。就像下面。
这是我的store.js组件;
import Vue from "vue";
import Vuex from "vuex";
var actions = _buildActions();
var modules = {};
var mutations = _buildMutations();
const state = {
storedData: []
};
Vue.use(Vuex);
const getters = {
storedData: function(state) {
return state.storedData;
}
};
function _buildActions() {
return {
fetchData({ commit }) {
axios
.get("/ajax")
.then(response => {
commit("SET_DATA", response.data);
})
.catch(error => {
commit("SET_ERROR", error);
});
}
};
}
function _buildMutations() {
return {
SET_DATA(state, payload) {
console.log("payload", payload);
const postData = payload.filter(post => post.userId == 1);
state.storedData = postData;
}
};
}
export default new Vuex.Store({
actions: actions,
modules: modules,
mutations: mutations,
state: state,
getters
});
现在将其导入到Average
组件中。
import store from './Store.js';
export default {
name:'average',
data(){
return{
avg:"",
storedData: [],
}
},
mounted () {
console.log(this.$store)
this.$store.dispatch('fetchDatas')
this.storedData = this.$store.dispatch('fetchData')
},
methods: {
avgArray: function (region) {
const sum = arr => arr.reduce((a,c) => (a += c),0);
const avg = arr => sum(arr) / arr.length;
return avg(region);
},
},
computed: {
mapGetters(["storedData"])
groupedPricesByRegion () {
return this.storedData.reduce((acc, obj) => {
var key = obj.region;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj.m2_price);
return acc;
}, {});
},
averagesByRegion () {
let arr = [];
Object.entries(this.groupedPricesByRegion)
.forEach(([key, value]) => {
arr.push({ [key]: Math.round(this.avgArray(value)) });
});
return arr;
},
}
}
我可以看到控制台中存储的数据。但是也有错误。我无法正确传递myComponent
答案 0 :(得分:1)
如果您不想使用vuex分发数据,也许您可以尝试eventBus,当您从axios重新放置@emit事件并在此事件的另一个组件中获取数据时
答案 1 :(得分:1)
问题是 要解决您遇到的错误,请执行以下步骤。
将商店文件导入初始化Vue实例的文件中。
// Assuming your store file is at the same level
import store from './store';
在您的内部,在Vue实例内添加商店对象
function initApp(appNode) {
new Vue({
el: appNode,
router: Router,
store // ES6 sytax
});
}
现在,您可以从任何组件访问商店。
更新:第二个错误
因为不想在使用相同方法的其他组件中写入相同的登录名,所以不必在组件的mutation
内更改其内部的数据。
因此
computed: {
...mapGetters(["storedData"]),
anotherFunction() {
// Function implementation.
}
}
在您的变异内设置数据。
SET_DATA(state, payload) {
console.log("payload", payload);
state.storedData = payload;
}
在吸气剂内部,您可以在计算的属性内执行所执行的操作。
storedData: function(state) {
const postData = state.storedData.filter(post => post.userId == 1);
return postData;
}
Vuex官方docs
这是工作中的codesandbox
希望这会有所帮助!