Я не хочу использовать Vuex для функции методов (из моего дома. js), чтобы получить данные о погоде из api для отображения в браузере, я попытался использовать геттеры и поставить это вычислено, но это не сработало. Это мой дом. js:
import Chart from 'chart.js';
import axios from 'axios';
import Diagramm from '../diagramm/Diagramm.vue';
import moment from 'moment';
import 'chartjs-plugin-datalabels';
import Temperature from '../temperature/Temperature.vue';
import Header from '../header/Header.vue';
import NextDays from '../nextdays/NextDays.vue';
import {mapState, mapGetters} from 'vuex';
import '../../custom.scss';
export default {
components: {
Header,
Diagramm,
Temperature,
NextDays
},
data() {
return {
isShown: false,
api_key: '',
url_base: 'https://api.openweathermap.org/data/2.5/',
query: '',
weather: {},
icons: {
'Rain': require('../../assets/regnerisch.png'),
'Clear': require('../../assets/sonne.png'),
'Clouds': require('../../assets/wolkig.png'),
'Snow': require('../../assets/schnee.png'),
'Drizzle':require('../../assets/regnerisch.png'),
'Thunderstorm':require('../../assets/regnerisch.png')
},
/*weather in next days */
weathers: [],
PREFERRED_TIME: '12:00:00',
DAYS: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
/*Chart*/
dates: [],
temps: [],
scaleFontColor:'white'
}
},
methods: {
removeType(event) {
this.query = ''
},
/* current location weather forecast */
currentCity() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
axios
fetch(`${this.url_base}weather?&lat=${position.coords.latitude}&lon=${position.coords.longitude}&units=metric&APPID=${this.api_key}`)
.then(res => {
return res.json();
}).then(this.setResultsCurrentWeather);
})
};
},
setResultsCurrentWeather(results) {
this.weather = results;
},
/* today temperature */
fetchWeather() {
fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
.then(res => {
return res.json();
}).then(this.setResults);
},
setResults(results) {
this.weather = results;
},
...
mounted() {
this.fetchWeather(); /* today temperature */
this.currentCity();
this.ForeCastOfCurrentCity();
this.$store.dispatch('currentCity');
this.$store.dispatch('fetchWeather');
},
computed:{
currentCity(){
return this.$store.dispatch('currentCity');
},
fetchWeather(){
return this.$store.dispatch('fetchWeather');
}
}
А это мой Дом. vue:
<b-sidebar
id="sidebar-right"
right
shadow
bg-variant="black"
img
src="@/assets/suchen.png"
text-variant="white"
>
<div slot="title">
<img src="@/assets/suchen.png" class="search-icon" />
</div>
<div class="px-3 py-2">
<img src="@/assets/close_white.png" class="close-white-icon" @click="removeType()" />
<input
class="input"
v-model="query"
v-on:keyup.enter="fetchWeather(), fetchWeatherForecast(), getData()"
/>
<hr style="background-color:white" class="hr2" />
</div>
</b-sidebar>
...
<Temperature :weather="weather"></Temperature>
My **Temperature.vue**( child component of **Home**):
<b-row v-if="typeof weather.main != 'undefined'">
<b-col cols="8" sm="8" md="9" lg="9" xl="8" class="number">
<b-row>
<b-col cols="4" sm="5" lg="6" xl="7"></b-col>
<b-col cols="6" sm="6" lg="5" xl="4">
<b-col cols="4" sm="8" lg="2"></b-col>
<b-col cols="2" sm="4" lg="10">
<p class="main-temp">{{ Math.round(weather.main.temp)}}</p>
<img :src="icons[weather.weather[0].main]" class="main-icon"/>
<p class="max-temp">{{ Math.round(weather.main.temp_max) }}°C</p>
<p class="min-temp">{{ Math.round(weather.main.temp_min) }}°C</p>
<b-row>
<img src="@/assets/humidity.png" class="humidity-icon" />
</b-row>
<b-row>
<img src="@/assets/wind.png" class="wind-icon" />
</b-row>
</b-col>
<b-col class="humidity">%</b-col>
<b-col class="humidity-number">{{ Math.round(weather.main.humidity) }}</b-col>
<b-col class="wind-number">
<p>{{ Math.round(weather.wind.speed) }}</p>
<p></p>
<p class="nph">nph</p>
</b-col>
</b-col>
</b-row>
</b-col>
<b-col cols="1" sm="1" md="1" lg="1" xl="3" class="grad">
<img src="@/assets/grad.png" class="grad-size" />
</b-col>
<b-col cols="3" sm="3" md="2" lg="2" xl="1" class="sonne"></b-col>
</b-row>
И my store. js :( Я не уверен, верны ли действия и мутации.)
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
namespaced:true,
state: {
weather:{},
api_key: '',
url_base: 'https://api.openweathermap.org/data/2.5/',
query: '',
icons: {
'Rain': require('../assets/regnerisch.png'),
'Clear': require('../assets/sonne.png'),
'Clouds': require('../assets/wolkig.png'),
'Snow': require('../assets/schnee.png'),
'Drizzle':require('../assets/regnerisch.png'),
'Thunderstorm':require('../assets/regnerisch.png')
},
},
actions:{
currentCity({commit}) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
axios
fetch(`${this.url_base}weather?&lat=${position.coords.latitude}&lon=${position.coords.longitude}&units=metric&APPID=${this.api_key}`)
.then(res => {
commit('CUR_CITY',res.json()) ;
}).then(this.setResultsCurrentWeather);
})
};
},
setResultsCurrentWeather(results) {
this.weather = results;
},
},
mutations:{
CUR_CITY (state, weather){
state.weather = weather
}
}
})
main. js:
import store from './store/store'
Vue.config.productionTip = false
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
Vue.prototype.moment = moment
new Vue({
store,
render: h => h(App),
router
}).$mount('#app')